溢出flex容器使用justify-content时滚动条异常问题如何解决

当flex容器的主轴可用宽度小于所有子元素的总宽度（含gap）时，同一容器同时设置overflow:auto和justify-content:space-around会导致两侧由justify-content生成的空白区域被溢出裁剪，不会计入滚动区域总宽度，因此左侧第一个子元素会超出可视边界且无法滚动查看。

采用嵌套容器拆分滚动和flex布局职责，改动最小且完美适配动态子元素数量场景：

代码修改 #

HTML调整 #

在原有flex容器外新增一层滚动容器，将固定宽度和overflow属性移到外层：

<div class="scroll-container" style="width:800px;">
  <div class="container space-around">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>

CSS调整 #

/* 新增外层滚动容器样式 */
.scroll-container {
  overflow: auto;
  background: gray;
}
.container{
  display:flex;
  flex-direction:row nowrap;
  gap: 5px;
  /* 新增以下两行 */
  width: 100%;
  min-width: fit-content;
}
.space-around {
  justify-content: space-around;
}
.item{
  position:relative;
  min-width:100px;
  min-height:100px;
  background:red;
}

原理解释 #

• 外层容器仅负责限制可视宽度、提供滚动能力，不受子元素宽度影响
• 内层flex容器设置width:100%保证外层宽度足够时，占满可用空间让justify-content正常生效
• min-width: fit-content保证外层宽度不足时，内层容器宽度自动撑开为所有子元素的总宽度，justify-content会在内层容器的完整宽度上分配空白，滚动区域会包含完整的内层容器内容，左右两侧的子元素都可以通过滚动查看

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