在 Flex 布局中，仅对子元素设置 height: 100% 无法生效，是因为父容器未定义明确高度；需确保父容器（如 .container）具有可计算的高度（如 100vh 或显式 height），子元素才能正确继承。
在 flex 布局中，仅对子元素设置 `height: 100%` 无法生效，是因为父容器未定义明确高度；需确保父容器（如 `.container`）具有可计算的高度（如 `100vh` 或显式 `height`），子元素才能正确继承。
当开发者尝试让 .menu-container 占满 .container 的全部高度时，直接写 height: 100% 却无效——这并非 Flex 特有 bug，而是 CSS 百分比高度的通用规则：height: 100% 仅在父元素具有「确定高度」（non-auto）时才有效。而默认情况下，.container 作为 flex 容器，其高度由内容撑开（即 height: auto），此时子元素的 100% 实际计算为 0。
✅ 正确解法是为父容器 .container 显式指定一个可解析的高度值。最常用且语义清晰的方式是使用视口单位：
.container {
width: 100%;
height: 100vh; /* 关键：赋予父容器明确高度 */
display: inline-flex;
justify-content: center;
align-items: center; /* 可选：垂直居中内容 */
}
同时，确保 .menu-container 继续使用 height: 100%（或更推荐 flex: 1，见下文进阶建议）：
.menu-container {
height: 100%; /* 现在能正确计算为 100vh */
width: 80%;
display: inline-flex;
justify-content: center;
}
⚠️ 注意事项：
- 不要依赖 min-height: 100vh 替代 height: 100vh —— 后者确保严格占满视口，前者仅设下限，仍可能因内容收缩导致子元素 100% 失效；
- 若页面需滚动，且希望菜单始终铺满可视区域（非整个文档高度），100vh 是最优选择；若需随内容自然延展，则应改用 flex: 1 配合 Flex 主轴填充（见下方替代方案）；
- 在 Flex 布局中，更语义化的方式是利用 Flex 自身能力：将 .container 设为 display: flex（而非 inline-flex），再对 .menu-container 设置 flex: 1，它将自动填满剩余空间（无需百分比高度）：
.container {
width: 100%;
min-height: 100vh; /* 保证至少一屏高 */
display: flex; /* 推荐：更标准的 Flex 根容器写法 */
justify-content: center;
align-items: center;
}
.menu-container {
flex: 1; /* 自动伸展占满可用空间 */
width: 80%;
display: flex;
justify-content: center;
}
? 总结：百分比高度不是“失效”，而是“等待条件”——只要父元素具备确定高度（px、vh、rem 等绝对/相对单位），height: 100% 就会精准工作。在响应式布局中，优先考虑 100vh 或 Flex 内置伸缩机制（flex: 1），既简洁又健壮。
