为何flex属性无法按比例调整子元素尺寸？padding场景问题

预期效果：.lower-card 总高度（含padding）为70px，.upper-card 总高度为140px，二者保持1:2的比例（父容器固定高度210px）。
实际问题：给.lower-card加了box-sizing: border-box后，padding还是会挤占.upper-card的高度，导致比例失衡。开发者工具显示两个元素的内容盒高度是1:2，但我需要的是包含padding的总高度维持1:2。

flex布局的比例分配（flex:1/flex:2）是基于元素的flex-basis计算的，默认flex-basis: auto对应内容盒的尺寸。即使设置了box-sizing: border-box，flex分配空间时还是先按内容盒的基础尺寸来计算比例，再把padding和border算进元素总高度，这就导致加了padding后，子元素的总高度超出了原本按比例分配的空间，挤压了另一个元素的高度。

方案1：嵌套内层容器（通用推荐） #

把padding转移到内层元素上，让外层的flex子元素只负责按比例分配空间，完全不影响比例计算：

修改后的HTML：

<div class="parent-card">
  <div class="upper-card">
    <!-- 若上层需要padding，同样可以添加内层容器 -->
  </div>
  <div class="lower-card">
    <div class="lower-inner">
      <!-- 这里放置原本.lower-card中的内容 -->
    </div>
  </div>
</div>

修改后的CSS：

.parent-card {
  border: 2px grey solid;
  border-radius: 9px;
  width: 400px;
  height: 210px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

.upper-card {
  flex: 2;
  background-color: blue;
  box-sizing: border-box;
}

.lower-card {
  flex: 1;
  background-color: red;
  box-sizing: border-box;
}

.lower-inner {
  padding: 20px;
  height: 100%;
  box-sizing: border-box;
}

方案2：固定尺寸（仅适用于父容器高度固定的场景） #

如果父容器高度不会变化，也可以直接用calc固定flex子元素的总高度：

.parent-card {
  border: 2px grey solid;
  border-radius: 9px;
  width: 400px;
  height: 210px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
}

.upper-card {
  flex: 0 0 calc(210px * 2 / 3); /* 固定140px高度 */
  background-color: blue;
  box-sizing: border-box;
}

.lower-card {
  flex: 0 0 calc(210px / 3); /* 固定70px高度 */
  background-color: red;
  padding: 20px;
  box-sizing: border-box;
}

此方案局限性大，父容器高度变化时需同步修改计算值，优先推荐嵌套内层容器的方案。

内容的提问来源于stack exchange，提问作者shadow