css - 两个具有 flex shrink 和 flex-basis 值的 div 的高度究竟是如何计算的？

Question

我有如下的html和css。

.container {
  height: 200px;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 0 0 10%;
  background-color: red;
}

.middle {
  flex: 0 2 20%;
  background-color: cyan;
}

.bottom {
  flex: 0 1 80%;
  background-color: orange;
}

<div class="container">
  <div class="top">top</div>
  <div class="middle">middle</div>
  <div class="bottom">bottom</div>
</div>

容器 div 的高度为 200 像素。top div 的 flex-grow 和 flex-shrink 值为 0， flex-basis 值为 20%。所以顶部 div 的高度是 20px (200 * 0.10)。直到这里一切正常。浏览器究竟如何计算具有 flex-shrink 和 flex-basis 值的中间和底部 div 的计算高度？（剩余的 180px 如何在这两个 div 之间划分。）

标签： cssflexbox