CSS容器宽度与overflow兼容问题：百分比max-width异常

你遇到的核心问题是对现代CSS中包含块宽度计算逻辑的理解偏差：当给滚动容器设置max-width: 百分比时，这个百分比是基于它的父容器（包含块）的内容宽度计算的。如果父容器没有明确设置width或overflow: hidden，父容器的宽度会被子元素（滚动菜单的内容）撑开，导致整个界面超出屏幕；而像素值max-width是固定尺寸，不会随内容变化，因此父容器不会被影响。

下面是两个直接可行的解决方案：

方案1：固定父容器边界+限制溢出 #

给滚动菜单的直接父容器设置明确宽度（全屏场景用100vw），同时添加overflow: hidden确保父容器边界不被突破。滚动容器设max-width: 100%和overflow-x: auto，让内容超出时仅在容器内部出现横向滚动，不会影响外部全屏界面。

示例代码：

<!-- 全屏容器 -->
<div class="full-screen">
  <!-- 滚动菜单父容器 -->
  <div class="menu-wrapper">
    <div class="scroll-menu">
      <span class="menu-item">首页</span>
      <span class="menu-item">产品列表</span>
      <span class="menu-item">用户中心</span>
      <span class="menu-item">订单管理</span>
      <span class="menu-item">设置</span>
      <span class="menu-item">帮助中心</span>
      <span class="menu-item">关于我们</span>
    </div>
  </div>
</div>

.full-screen {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* 确保全屏容器不出现滚动条 */
  margin: 0;
  padding: 0;
}

.menu-wrapper {
  width: 100%;
  overflow: hidden; /* 限制滚动菜单的宽度范围 */
  padding: 1rem;
  box-sizing: border-box; /* 避免内边距额外撑开宽度 */
}

.scroll-menu {
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap; /* 让菜单项横向排列 */
}

.menu-item {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: #f0f0f0;
  margin-right: 0.8rem;
  border-radius: 4px;
}

方案2：用Flex布局简化实现 #

利用Flex特性，给父容器设display: flex，滚动容器设flex: 0 0 auto（禁止伸缩），同时保留max-width: 100%和overflow-x: auto，父容器会自动限制滚动容器的宽度，无需额外设置overflow: hidden。

调整后的核心CSS：

.menu-wrapper {
  display: flex;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.scroll-menu {
  flex: 0 0 auto;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

额外注意：如果菜单内有浮动或Grid布局元素，务必给所有相关容器加上box-sizing: border-box，统一内外边距的宽度计算逻辑，避免额外尺寸撑开容器。

内容的提问来源于stack exchange，提问作者Ed M