在 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% 向上穿透多层无高度定义的祖先（如 、 默认无高度）；
• 若 .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 构建更健壮的全高布局体系。