我的期望：.lower-card height 应该是 70px，并且 .upper-card height 应达到 140px（因为 flex 已设为 1，以及 2 分别，总计 height 为 210px）。

现实：问题在于我的 padding 会向上应用，挤占到 .upper-card height，即使我在 .lower-card 上设置了 border-box，也会把比例偏离到 1:2。

在生产代码中，我需要 padding 来调整元素，因此不能去掉 padding。

在 dev console 中，我注意到一件重要的事：.lower-card 的 content height 为 55.60px，而 .upper-card 的 111.20px 为 111.20px，它们的比例是 1:2，但我希望高度的比例与 padding 一致，达到 1:2。

我的解释是，flex 仅适用于两个子元素的 content height，但那样如果你想保持 flex: 1 和 flex: 2 的尺寸就不可能添加 padding。

编辑：这个问题被标记为与另一个问题的重复。所引用的问题是在当填充值被作为 percentage 给出时，padding 的渲染不同。IE过去会把它渲染为0，而Chrome使用 parent width 渲染，IE自那时起已经改变了标准。我的问题在于 padding 的应用位置，而不是浏览器计算方式的差异。20px 作为 padding，无论如何都是一个绝对值。

编辑2：我的提交仍在审核中，请大家看一下。

.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;
  padding: 20px;
  box-sizing: border-box;
}

<div class="parent-card">
  <div class="upper-card">
  </div>
  <div class="lower-card">
  </div>
</div>

解决方案

如果直接在较低卡片上应用填充时无法遵循比例，请尝试给较低卡片再添加一个内部包装器，并将填充应用到该包装器上。

.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;
  /* padding: 20px; */
  box-sizing: border-box;
}

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

<div class="parent-card">
  <div class="upper-card">
  </div>
  <div class="lower-card">
    <div class="lower-card-inner-wrapper">Contents...</div>
  </div>
</div>

有了这个，你会发现蓝色和红色的div高度分别为137.333px和 68.6667px，而不是140px和 70px。这是因为父div上的2px边框在总高度210中额外占用了4px的垂直空间。要解决这个问题，可以将父div的 box-sizing改为content-box（或将其高度改为214px以考虑边框）。