屏幕宽度低于特定值后，横向滚动条为何停止收缩？

问题描述 #

我是HTML/CSS新手，想要实现一行四张图片，当页面宽度小于四张图片总宽度加内边距时，下方出现横向滚动条。目前大部分功能正常，但页面宽度低于约975px时，滚动条停止收缩，预期它会随页面宽度缩小而持续收缩。

代码示例 #

HTML代码 #

<section>
  <div class="subsection">
    <div class="image-container">
      <div class="image-box">
        <img src="img1" alt="Image 1" />
      </div>
      <div class="image-box">
        <img src="img2" alt="Image 2" />
      </div>
      <div class="image-box">
        <img src="img3" alt="Image 3" />
      </div>
      <div class="image-box">
        <img src="img4" alt="Image 4" />
      </div>
    </div>
  </div>
</section>

CSS代码 #

section {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.subsection {
  width: 1160px;
  margin: 0 auto;
}

.image-container {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.image-box {
  flex: 0 0 260px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(163, 163, 241);
}

img {
  width: 200px;
  height: auto;
}

问题原因 #

核心问题在.subsection的固定宽度设置：width:1160px。这个值刚好等于4个.image-box（260px4）加上3个间隙（40px3）的总宽度（2604+403=1160px）。当页面宽度小于1160px + section左右padding（20px*2=40px）即1200px时，.subsection不会再跟随页面宽度缩小，始终保持1160px的宽度，导致内部的.image-container可用宽度被固定，滚动条自然无法继续收缩。

修复方案 #

把.subsection的固定宽度修改为最大宽度+自适应宽度，让它在页面足够宽时保持1160px居中，页面变窄时随宽度自适应缩小：

.subsection {
  max-width: 1160px; /* 保留原最大宽度限制 */
  width: 100%;       /* 页面窄时自适应占满可用宽度 */
  margin: 0 auto;
}

额外优化（可选） #

如果希望图片和容器边缘有间距，避免滚动时图片贴边，可以给.image-container添加左右内边距：

.image-container {
  overflow-x: auto;
  white-space: nowrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  padding: 0 10px; /* 新增左右内边距 */
}

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