如何用Flexbox实现一列两行布局，满足动态高度分配规则？

根据需求的三个规则，我们可以通过 Flexbox 的 flex 属性组合配合 overflow 来实现，核心是控制上下两行的伸缩逻辑和高度边界：

核心 CSS 代码 #

/* 容器：设置固定高度，垂直方向排列 */
.container {
  display: flex;
  flex-direction: column;
  height: 400px; /* 替换为实际业务需要的固定高度，比如 100vh */
  border: 1px solid #ddd;
}

/* 上行元素 */
.top-section {
  flex: 1 0 auto; /* 空间充足时自适应内容，空间不足时优先占用剩余空间 */
  overflow: auto; /* 内容超出时显示滚动条 */
  min-height: 0; /* 关键：允许元素高度收缩，否则内容溢出会撑开容器 */
  padding: 10px;
  background-color: #f5f5f5;
}

/* 下行元素 */
.bottom-section {
  flex: 0 1 40%; /* 基础高度为容器的40%，内容不足时自动收缩到自身高度 */
  overflow: auto; /* 内容超出时显示滚动条 */
  min-height: min-content; /* 确保至少能显示自身内容 */
  padding: 10px;
  background-color: #e8e8e8;
}

规则匹配说明 #

1. 内容完全容纳时：容器空间充足，上行 flex-grow:0 不会扩展，保持自身内容高度；下行 flex-basis:40% 但因内容不足会收缩到自身高度，两行完整显示内容。
2. 内容超出容器时：若下行内容高度超过容器的40%，下行会保持40%高度（内容滚动），上行占用剩余60%高度（内容滚动）；若下行内容不足40%，下行收缩到自身内容高度，上行自动占用剩余所有空间（可超过60%），同时满足补充规则要求。

关键注意点 #

• 容器必须设置固定高度（如 height: 100vh 或具体像素值），否则无法判断内容是否超出容器。
• 上行的 min-height: 0 是必须的，默认情况下 Flex 元素不会收缩到小于内容高度，这个属性允许内容溢出时滚动，避免撑开容器。

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