在 Flex 布局中，当一个子项（如固定高度的 .large-child）决定容器高度时，可通过设置 align-items: stretch 让其他子项（如 .child-flex）自动填满可用垂直空间，无需硬编码高度或依赖 height: 100%。
在 flex 布局中，当一个子项（如固定高度的 `.large-child`）决定容器高度时，可通过设置 `align-items: stretch` 让其他子项（如 `.child-flex`）自动填满可用垂直空间，无需硬编码高度或依赖 `height: 100%`。
默认情况下，Flex 容器的 align-items 值为 stretch，但若你曾显式设置为 center、flex-start 等值（如原代码中的 align-items: center），则子项将不再拉伸——这正是问题根源：.child-flex 虽设 height: 100%，却因父容器未启用拉伸行为而失效（height: 100% 在 Flex 子项中仅在 align-items: stretch 下才生效，且需父容器有明确高度或由内容撑起）。
✅ 正确解法是：
- 将 .parent 的 align-items 显式设为 stretch（确保子项在交叉轴方向自动拉伸）；
- 移除 .child-flex 上无效的 height: 100%（Flex 子项高度由 align-items 控制，而非 height）；
- 若需内部对齐（如居中排列 标签），可在 .child-flex 上单独设置 align-items: center —— 这仅影响其自身子元素，不影响它在父容器中的拉伸行为。
以下是可直接运行的完整示例：
.parent {
display: flex;
justify-content: flex-start; /* 可选：控制主轴排列 */
align-items: stretch; /* 关键：让子项在交叉轴（垂直方向）自动拉伸 */
width: 100%;
background-color: #ccc;
padding: 8px;
}
.child-flex {
display: flex;
flex-wrap: wrap; /* 可选：支持多行 */
justify-content: flex-start;
align-items: center; /* 仅作用于其内部 <a> 元素的垂直居中 */
background-color: #4285f4;
color: white;
gap: 8px; /* 更现代的间距控制 */
padding: 8px;
}
.large-child {
background-color: #ea4335;
width: 50px;
height: 50px;
}<div class="parent">
<div class="large-child"></div>
<div class="child-flex">
<a>Item 1</a>
<a>Item 2</a>
<a>Item 3</a>
</div>
</div>⚠️ 注意事项：
- align-items: stretch 是 Flex 子项拉伸的前提，且仅在交叉轴方向生效（对 flex-direction: row 即垂直方向）；
- 不要对 .child-flex 设置 height 或 min-height，否则可能覆盖拉伸行为；
- 若 .parent 高度受限（如设置了 max-height 或 height），拉伸仍以该限制为边界；
- 如需 .child-flex 内容横向居中，用 justify-content; 垂直居中用 align-items —— 二者互不干扰。
总结：Flex 布局中“跟随兄弟元素高度”本质是利用 align-items: stretch 的默认拉伸机制，而非依赖百分比高度。理解交叉轴行为与层级对齐控制的关系，是掌握 Flex 动态尺寸协同的关键。
