对齐内容时，滚动条在溢出的 flex 对象中不正确答案

【问题标题】：scollbar not correct in overflown flex object when justifing content对齐内容时，滚动条在溢出的 flex 对象中不正确
【发布时间】：2021-11-24 19:05:35
【问题描述】：

我要在一个小于内部项目的容器中将内容对齐到空间周围。

它似乎部分起作用，但是，项目的开头超出了范围。

我的主要问题是我有一些这样的 HTML。

    .container{
          display:flex;
          flex-direction:row nowrap;
          overflow:auto;
          gap: 5px;
          background:gray;
        }
        .space-around {
          justify-content: space-around;
        }
        .item{
          position:relative;
          min-width:100px;
          min-height:100px;
          background:red;
        }

    <div class="container space-around" style="width:800px;">
      <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>

只要容器比项目的内部总和宽，结果就可以，但是..当容器更小时，我得到这个：

我的情况是这些项目处于动态范围内，所以我什至无法暴力破解数字并添加左填充。

其他人有这个问题，知道如何解决吗？

【问题讨论】：

标签： html css flexbox overflow

【解决方案1】：

使用space-between会均匀增加空间

    .container{
          display:flex;
          flex-direction:row nowrap;
          overflow:auto;
          gap: 5px;
          background:gray;
        }
        .space-between {
          justify-content: space-between;
        }
        .item{
          position:relative;
          min-width:100px;
          min-height:100px;
          background:red;
        }

    <div class="container space-between" style="width:800px;">
      <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>

【讨论】：

您的解决方案是一个不错的选择，但我还希望在第一个项目之前和最后一个项目之后的空间，在只有 1 或 2 个项目时将它们均匀地居中。遗憾的是，空间之间只添加了项目之间的动态空间。
@Droa 然后添加大于 div 总数的外部容器的总宽度
要求孩子是固定计数的。