本文详解在垂直方向可调整大小的 Flex 容器中，因 min-height: min-content 默认行为导致底部区域无法充分伸展的根本原因，并提供通过设置 min-height: 0 或精确最小高度值来强制 flex 项收缩与扩展的实战方案。
本文详解在垂直方向可调整大小的 flex 容器中，因 `min-height: min-content` 默认行为导致底部区域无法充分伸展的根本原因，并提供通过设置 `min-height: 0` 或精确最小高度值来强制 flex 项收缩与扩展的实战方案。
在构建类似 CodePen 编辑器的三栏垂直可调布局（HTML/CSS/JS）时，你可能会发现：当向上拖动分隔线时，上方窗口能正常收缩，但向下拖动时，下方窗口却“卡住”无法占满剩余空间——即使逻辑上已为其设置了 flex: 1 或动态计算高度。这一现象并非 JavaScript 计算错误，而是 CSS Flex 布局中一个常被忽视的关键约束：flex 项目的默认 min-height（或 min-width）在主轴方向上为 min-content。
在 flex-direction: column 的容器（如本例中的 <aside>）中，每个子 <div> 作为 flex 项，默认具有 min-height: min-content。这意味着：即使你通过 JS 设置了 height: calc(...) 或 flex: 1，浏览器仍会阻止其高度低于其内部内容（如 .lang-label + <textarea>）的最小固有高度。尤其当 <textarea> 内容为空或极少时，其 min-content 高度极小，但受父级 flex 项限制，实际渲染高度无法真正“压缩”，进而干扰后续 flex 项的可用空间分配，最终导致底部区域无法按预期扩展。
✅ 正确解法：显式重置 min-height
只需为所有可调整的面板（即 aside > div）添加 min-height: 0，即可解除该隐式约束，使 flex 项能自由收缩至 0（或由 calc()/flex 规则决定的任意值），从而保障后续元素获得充足空间：
aside > div {
width: 100%;
display: flex;
flex-direction: column;
height: calc(100% / 3); /* 初始均分 */
position: relative;
min-height: 0; /* ? 关键修复：允许 flex 项收缩 */
}⚠️ 注意事项：
- min-height: 0 是最简洁通用的解法，适用于大多数场景；
- 若需确保标题栏（.lang-label）始终可见，可将 min-height 设为具体像素值（如 min-height: 32px），该值应 ≥ .lang-label 的实际高度（可通过 getBoundingClientRect().height 动态获取并注入 CSS，或预留安全余量）；
- 不要仅依赖 flex: 1 而忽略 min-height —— 在嵌套 flex 或存在固定高度子元素时，flex: 1 本身无法覆盖 min-content 限制；
- JavaScript 中动态设置 height 后，建议同步清除 flex 属性（如示例中 win.style.removeProperty("flex")），避免与 CSS flex 行为冲突；对目标项启用 flex: 1 时，也务必确保其父容器是 flex 容器且主轴方向匹配。
总结：Flex 布局的“不可见枷锁”常源于 min-height/min-width 的默认值。面对可拖拽、动态高度的面板布局，主动设置 min-height: 0 不仅是修复展开异常的直接手段，更是构建健壮响应式 UI 的基础实践。
