在 Flex 布局中，仅对子元素设置 height: 100% 无法生效，是因为父容器未显式定义高度；需确保父容器（如 .container）具有明确的高度基准（如 height: 100vh 或 min-height: 100vh），子元素的百分比高度才能正确计算。
在 flex 布局中，仅对子元素设置 `height: 100%` 无法生效，是因为父容器未显式定义高度；需确保父容器（如 `.container`）具有明确的高度基准（如 `height: 100vh` 或 `min-height: 100vh`），子元素的百分比高度才能正确计算。
要使 .menu-container 完全撑满其父容器 .container 的高度，核心在于 为父级 Flex 容器提供可被继承的高度上下文 。CSS 中 height: 100% 是相对值，它依赖于父元素的 计算后高度（computed height）。而默认情况下，.container 作为 inline-flex 元素，其高度由内容决定（即“包裹内容”），没有固有高度，因此子元素的 height: 100% 实际计算为 0px。
✅ 正确做法是：为 .container 显式指定一个确定的高度单位，例如：
.container {width: 100%; height: 100vh; /* 关键：使用视口高度作为基准 */ display: inline-flex; justify-content: center; align-items: center; /* 可选：垂直居中内容 */}? 补充说明：100vh 表示视口高度的 100%，是稳定可靠的根级高度参考。若需适配文档流或留白（如 header/footer），也可改用 min-height: 100vh，并配合 flex-direction: column 和 flex: 1 进行弹性分配。
同时，建议将 .menu-container 的 display 从 inline-flex 改为 flex（或保留 inline-flex 但确保其能接收父级高度），并添加 align-self: stretch（Flex 子项默认行为，通常无需显式声明），以确保其在主轴方向充分延展：
.menu-container {height: 100%; /* 现在有效：父级有 100vh 高度 */ width: 80%; display: flex; /* 推荐改为 flex，语义更清晰 */ justify-content: center; margin: 0; padding: 0;}⚠️ 注意事项：
- 不要依赖 height: 100% 向上穿透多层无高度定义的祖先（如 <html>、<body> 默认无高度）；
- 若 .container 需响应式适配（如移动端），可在媒体查询中动态调整高度，例如：
@media (max-width: 685px) {.container { height: auto; /* 移动端改为自适应高度，避免过长空白 */ flex-direction: column;} } - inline-flex 本身不影响高度继承，但易与 inline-block 行为混淆；如无特殊布局需求（如文字环绕），推荐统一使用 display: flex。
✅ 总结：Flex 子项实现 100% 高度的关键路径是——父 Flex 容器必须具备明确高度（非 auto），且该高度需可被百分比继承。100vh 是最直接、兼容性最佳的解决方案；进阶场景下可结合 flex: 1、min-height 与 align-items 构建更健壮的全高布局体系。
