Flex布局导航子项水平滚动异常：列表初始元素不可见排查

嘿，我看了你的代码，问题出在几个布局细节上，尤其是宽度计算和flex容器的设置，导致导航列表被错位裁切了。咱们一步步来修复：

核心问题点 #

1. 未设置box-sizing: border-box：默认情况下元素的width仅指内容宽度，加上padding后会超出父容器范围。你的.parent设置了width:100%和padding:0 2em，实际占据宽度会是视口宽度+4em，直接打乱了子元素的宽度计算逻辑。
2. .rest的宽度计算不合理：用calc(100% - 100px)手动计算宽度，结合.parent的justify-content: space-between，导致.rest被强制推到右侧，和.iconspace之间的空间未被正确利用，最终列表左侧被裁切。
3. ul的宽度限制导致偏移：设置width:100%后，justify-content: space-evenly会强制在有限宽度内分配空间，让列表整体偏移，进一步加剧了左侧内容不可见的问题。

修改后的完整代码 #

HTML（无需改动）

<div class="parent"> 
  <div class="iconspace"> ¯\_(ツ)_/¯ </div> 
  <div class="rest"> 
    <ul> 
      <li>A</li> 
      <li>B</li> 
      <li>C</li> 
      <li>D</li> 
      <li>E</li> 
      <li>F</li> 
      <li>G</li> 
      <li>H</li> 
      <li>I</li> 
      <li>J</li> 
      <li>K</li> 
      <li>L</li> 
    </ul> 
  </div> 
</div>

CSS（关键修改标注）

/* 全局设置，解决宽度计算混乱的核心 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body { 
  background: teal; 
} 

.parent { 
  width: 100%; 
  height: 80px; 
  background: mistyrose; 
  display: flex;
  /* 去掉space-between，改用flex自动分配剩余空间 */
  align-items: center; 
  padding: 0 2em; 
  border-radius: 50px; 
  position: relative; 
} 

.iconspace { 
  width: 100px; 
  background: slategray; 
  height: 100%; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 

.rest { 
  /* 用flex:1代替固定宽度，自动占据.iconspace之外的所有剩余空间 */
  flex: 1;
  height: 100%; 
  background: papayawhip; 
  overflow-x: auto; 
  position: relative;
  /* 增加间距，优化视觉效果 */
  margin-left: 1em;
} 

ul { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  list-style-type: none; 
  height: 100%; 
  /* 去掉width:100%，让ul宽度由内容自动决定 */
  margin: 0;
  /* 增加内边距，避免li贴在滚动容器边缘 */
  padding: 0 0.5em;
} 

li { 
  border: 1px solid brown; 
  border-radius: 50%; 
  min-height: 32px; 
  min-width: 32px; 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  margin: 0 1em; 
  color: crimson; 
}

修改说明 #

• box-sizing: border-box：确保所有元素的宽度包含padding和border，彻底解决宽度溢出问题。
• flex:1给.rest：让它自动占据父容器的剩余空间，比手动计算宽度更灵活可靠，适配不同屏幕尺寸。
• 移除ul的width:100%：让列表宽度由内容决定，当li数量超出容器宽度时，overflow-x:auto会正常触发水平滚动，且列表从左侧开始显示，不会偏移。

这样修改后，你的导航列表就能正常水平滚动，前几项也不会被隐藏了。

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