overflow限制子元素宽度：如何实现滚动且不限制子元素宽度？

问题场景 #

我需要实现一个横向滚动的容器，内部用Flex布局排列子元素，每个子元素固定宽度600px，但当前设置overflow: scroll后，子元素会被压缩以适配屏幕宽度，只有手动指定Flex容器的总宽度时，子元素才能正常显示600px。原代码如下：

<div className="App">
  <div style={{ overflow: "scroll" }}>
    <div style={{ display: "flex", flexDirection: "row" }}>
      <div style={{ width: "600px" }}>Test 1</div>
      <div style={{ width: "600px" }}>Test 2</div>
      <div style={{ width: "600px" }}>Test 3</div>
      <div style={{ width: "600px" }}>Test 4</div>
    </div>
  </div>
</div>

原因分析 #

这是Flex布局的默认特性导致的：

• Flex子元素默认带有flex-shrink: 1属性，当容器空间不足时，子元素会自动收缩来适配容器宽度。
• Flex容器本身默认会根据父容器的宽度调整自身宽度，不会主动撑开到子元素的总宽度。

解决方案 #

有两种简单的方法可以实现需求：

方法一：禁止子元素收缩 #

给每个Flex子元素添加flexShrink: 0，强制子元素保持设定的宽度，不会被压缩：

<div className="App">
  <div style={{ overflow: "scroll" }}>
    <div style={{ display: "flex", flexDirection: "row" }}>
      <div style={{ width: "600px", flexShrink: 0 }}>Test 1</div>
      <div style={{ width: "600px", flexShrink: 0 }}>Test 2</div>
      <div style={{ width: "600px", flexShrink: 0 }}>Test 3</div>
      <div style={{ width: "600px", flexShrink: 0 }}>Test 4</div>
    </div>
  </div>
</div>

方法二：让Flex容器撑开到子元素总宽度 #

给Flex容器设置minWidth: "max-content"，让容器的最小宽度等于所有子元素宽度之和，这样容器不会被父容器宽度限制，自然能容纳所有子元素，配合外层的滚动属性实现横向滚动：

<div className="App">
  <div style={{ overflow: "scroll" }}>
    <div style={{ display: "flex", flexDirection: "row", minWidth: "max-content" }}>
      <div style={{ width: "600px" }}>Test 1</div>
      <div style={{ width: "600px" }}>Test 2</div>
      <div style={{ width: "600px" }}>Test 3</div>
      <div style={{ width: "600px" }}>Test 4</div>
    </div>
  </div>
</div>

说明 #

两种方法都能解决问题：

• 方法一更直接，针对子元素的收缩行为进行控制，适合需要精准控制每个子元素尺寸的场景。
• 方法二通过调整容器宽度来适配子元素，代码更简洁，适合子元素尺寸统一的场景。

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