使用display:flex时Div为何收缩？如何实现横向滚动？

云上老周

2026-5-28

搞定Flex布局的横向滚动与元素收缩问题

嘿，这是Flex布局里超常见的一个小坑，我来给你捋清楚为啥会这样，以及怎么快速解决～

为啥你的Div会自动收缩？

Flex容器（就是你的.wrapper）里的子元素（.box）默认带着一个flex-shrink: 1的属性。这个属性的作用是：当容器的宽度装不下所有子元素的总宽度时，每个子元素会自动按比例缩小，强行塞进容器里。所以你给.box设的width:100px会被这个收缩机制“吃掉”，自然就不生效啦。

实现横向滚动的正确姿势

要让.box保持100px宽度，同时让容器出现横向滚动条，只需要加一行关键代码：

步骤拆解

给.box加上flex-shrink: 0：直接关闭它的收缩能力，让它死死守住你设置的宽度。
确认.wrapper的overflow-x: auto已经设置好：这一步是让容器在内容超出时自动显示横向滚动条。

修改后的完整代码

CSS代码

.wrapper {
  display: flex;
  width: 300px;
  overflow-x: auto;
}

.box {
  height: 100px;
  width: 100px;
  margin-right: 10px;
  background-color: blue;
  flex-shrink: 0; /* 核心：禁止元素收缩 */
}

HTML代码

<div class="wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>