如何使flex父元素在子元素min-height不足时溢出，而非压缩子元素？

问题背景 #

我有一个设置了display: flex的父容器，高度为视口高度的80%，包含多个子元素。多数子元素高度由自身内容决定，其中一个子元素（.long-child）通过flex-grow: 1占据剩余可用空间。

这个.long-child内部也是flex布局，其中的.inner-long-child需要占据可用空间，且设置了min-height: 150px。当前问题是：当空间不足以满足.inner-long-child的min-height时，.long-child会收缩，而非最外层父容器触发溢出。

核心需求：

• 空间充足时，.inner-long-child通过flex-grow: 1填满.long-child的可用空间
• 当空间降至.inner-long-child的min-height后，不再继续收缩，转而让最外层父容器（.parent）触发垂直溢出
• 若.inner-long-child内部内容过长，自身触发overflow-y: auto

解决方案 #

修改CSS代码如下：

.parent {
  display: flex;
  flex-flow: column;
  height: 80vh;
  overflow-y: auto; /* 空间不足时父容器触发垂直滚动 */
  min-height: min-content; /* 确保父容器至少容纳所有子元素的最小高度需求 */
}

.long-child {
  flex-grow: 1;
  display: flex;
  flex-flow: column;
  min-height: min-content; /* 让.long-child至少容纳内部元素的最小高度，避免过度收缩 */
}

.inner-long-child {
  flex-grow: 1;
  min-height: 150px;
  overflow-y: auto;
}

HTML结构无需修改：

<!DOCTYPE html>
<html lang="en">
  <body>
    <div class="parent">
      <div class="static-child">
        <h1>This is a short child</h1>
      </div>
      <div class="static-child">
        <h1>This is a short child</h1>
      </div>
      <div class="long-child">
        <div class="inner-static-child">
          <h2>Inner short child</h2>
        </div>
        <div class="inner-long-child">
          <p>Long content</p>
          <p>Long content</p>
          <p>Long content</p>
          <p>Long content</p>
          <p>Long content</p>
          <p>Long content</p>
        </div>
      </div>
      <div class="static-child">
        <h1>This is a short child</h1>
      </div>
    </div>
  </body>
</html>

原理说明 #

• min-height: min-content：这个属性会让容器的高度至少等于内部所有元素的最小高度总和，对于.parent来说，就是确保它不会收缩到无法容纳.inner-long-child的150px最小高度；对于.long-child来说，就是确保它不会被父容器过度压缩。
• 移除.long-child的min-height: 0：原属性会强制flex项目忽略内部内容的高度限制，允许无限收缩，现在移除后它会尊重内部元素的min-height要求。
• .parent添加overflow-y: auto：当总高度超过80vh时，父容器会显示滚动条，而不是让内部的.long-child继续收缩。

内容的提问来源于stack exchange，提问作者bog.dn