如何让Flex容器高度取子元素的min-height最大值？

一、先搞懂Flex容器交叉轴尺寸的计算逻辑 #

对于row方向的Flex容器，交叉轴是垂直方向（高度）。容器的交叉轴尺寸默认会被子元素的实际占用高度撑起来，子元素的实际高度由以下因素共同决定：

• 若设置了height：内容高度≤height时，实际高度等于height；内容超出且未设overflow时，实际高度会被内容撑开。
• 若未设height但设了min-height：内容高度＜min-height时，实际高度等于min-height；内容超出则被撑开。
• max-height是高度上限，只会限制高度不会主动让元素变高。

你场景里的.item1因为min-height:100px，实际高度固定为100px，容器高度也被这个最高子元素拉到了100px。但.item3因为你设置了align-items: start，默认顶部对齐，所以它的高度只由自身内容决定，不会自动填满容器高度。

二、解决.item3适配容器高度的方案 #

不用硬写height:100px，只需要调整两个关键样式：

修改后的完整代码 #

CSS

.ctn {
  display: flex;
  background-color: orange;
  /* 改用默认的align-items: stretch，让子元素自动拉伸到容器高度 */
  align-items: stretch;
  border: 2px solid black;
}

.ctn > div {
  flex: 1;
}

.item1 {
  background-color: darkblue;
  min-height: 100px;
}

.item2 {
  background-color: purple;
}

.item3 {
  /* 移除不必要的min-height:0 */
  background-color: #ccc; /* 加背景方便观察效果 */
}

.item3 p {
  height: 100%; /* 让p标签填满.item3的高度 */
  margin: 0; /* 去掉默认margin避免溢出容器 */
  overflow-y: auto; /* 内容过多时显示滚动条，可选 */
}

HTML

<div class="ctn">
  <div class="item1"></div>
  <div class="item2"></div>
  <div class="item3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra nibh et nisi bibendum tincidunt. Vivamus sodales maximus nibh, consectetur maximus odio tincidunt non. Quisque vitae massa ac massa facilisis malesuada. In maximus massa nec augue aliquet volutpat. Donec tincidunt nibh eu ultrices feugiat. Aenean leo dui, ullamcorper quis est ut, mattis convallis leo. Proin tellus lectus, interdum id quam ac, luctus interdum urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam urna quam, suscipit vel velit sed, blandit placerat orci. Morbi justo felis, tempor id euismod sed, auctor nec justo. Ut ac augue elit. Praesent condimentum malesuada felis, vitae vulputate turpis maximus id. Nunc in aliquam urna. Donec interdum elit eleifend eros molestie ultrices.

      Donec sodales enim tincidunt, eleifend diam sit amet, venenatis felis. Cras lacinia massa rhoncus rhoncus auctor. Quisque et lobortis nibh. Quisque non felis ac ipsum pretium mattis. Nam vulputate volutpat tempus. Donec facilisis nibh ut ligula condimentum, nec vehicula elit gravida. Nunc fringilla pulvinar nisi et condimentum. Morbi rhoncus semper venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quis arcu et nisl varius elementum. Vestibulum eu viverra ex. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In sagittis imperdiet viverra. Aenean et sem nec libero sodales tincidunt. Ut vitae nisl malesuada, elementum lectus quis, mollis libero.</p>
  </div>
</div>

三、特殊场景补充 #

如果必须保留align-items: start（比如其他子元素需要顶部对齐），可以单独给.item3设置align-self: stretch，这样只有它拉伸填满容器高度，其他元素保持顶部对齐：

.item3 {
  align-self: stretch;
  background-color: #ccc;
}

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