解決彈性盒子被内容撐開至超出其父元素的BUG

記錄一次彈性盒子問題的解決方案，不一定具有普适性，僅供參考

需求

實作垂直彈性盒子，滿足其中一個子元素給定高度，另一個子元素自動填充

問題

自動填充的子元素由于未設定高度，将被其内容支撐，直至超出父容器

解決方案

給該元素設定高度初始值例如：

height: 0;

示例代碼

<div class="container">
  <div class="fix"></div>
  <div class="flex">
    <div class="content"></div>
  </div>
</div>
           

.container {
  width: 300px;
  height: 300px;
  border: solid 1px red;
  display: flex;
  flex-direction: column;
}

.fix {
  height: 150px;
  background-color: LemonChiffon;
}

.flex {
  flex: 1;
  background-color: pink;
  height: 0; /* 給定初始高度 */
}

.content {
  width: 50%;
  height: 200px;
  background-color: lightgray;
}