使用 CSS Flexbox 的 flex: 1 配合 flex-direction: column，可让动态子元素自动占据父容器中除去固定尺寸兄弟元素后的剩余垂直空间，无需硬编码 calc() 或 JS 计算。
使用 css flexbox 的 `flex: 1` 配合 `flex-direction: column`，可让动态子元素自动占据父容器中除去固定尺寸兄弟元素后的剩余垂直空间，无需硬编码 `calc()` 或 js 计算。
在传统块级布局中，当父容器高度固定且包含多个子元素时，若一个子元素设为 height: 100%，它会尝试占满整个父高，而忽略其他兄弟元素所占空间，最终导致溢出或布局错乱——正如问题中橙色 .inner-main-dynamic-size 被紫色 .inner-top-fixed-size 推出红色父容器的情况。
推荐解法：Flexbox 布局（现代、语义清晰、响应友好）
将父容器设为 display: flex 并指定 flex-direction: column，使其子元素沿垂直方向堆叠；再对需自适应的子元素应用 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），即可让它自动拉伸并填满所有剩余可用高度。
✅ 正确示例代码：
.outer-fixed-size {
width: 400px;
height: 100px;
background-color: #ff6b6b; /* 红色 */
padding: 5px;
box-sizing: border-box;
display: flex; /* 启用 Flexbox */
flex-direction: column; /* 垂直排列子项 */
}
.inner-top-fixed-size {
height: 50px;
width: 100%;
background-color: #8a5cf6; /* 紫色 */
}
.inner-main-dynamic-size {
flex: 1; /* 关键：自动填充剩余空间 */
width: 100%;
background-color: #ffa500; /* 橙色 */
}<div class="outer-fixed-size"> <div class="inner-top-fixed-size"></div> <div class="inner-main-dynamic-size"></div> </div>
? 注意事项与最佳实践：
- flex: 1 依赖于父容器的明确高度（如本例中的 height: 100px），若父高由内容撑开，则需额外约束（例如 min-height 或 max-height）。
- 避免混用 height: 100% 和 flex: 1 在同一子元素上——前者在 Flex 容器中可能失效或产生冲突。
- 如需支持极老浏览器（IE9 及以下），可考虑 position: absolute + top/bottom 方案，但维护性差、缺乏弹性，不推荐新项目使用。
- 若存在多个可伸缩子元素，flex: 1 会按比例分配剩余空间；如需不均等分配，可分别设置 flex: 2、flex: 1 等。
掌握这一模式后，你还能轻松扩展实现三栏布局（顶部/底部固定 + 中间滚动）、卡片内标题+内容+操作区等常见 UI 结构，真正实现“写一次，适配多种尺寸”。
