flex布局下子元素总宽度超出父容器时如何实现溢出滚动

当子元素宽度总和大于父容器宽度时，预期实现横向溢出滚动效果，但如下代码运行后子元素被压缩，没有出现溢出：

原始问题代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 600px;
  padding: 1rem;
  display: flex;
  overflow-x: auto;
  border: 1px solid red;
}

.container div {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<body>
  <div class="container">
    <div>child</div>
    <div>child</div>
    <div>child</div>
    <div>child</div>
    <div>child</div>
    <div>child</div>
  </div>
</body>

Flex 布局的子元素（flex item）默认自带属性 flex-shrink: 1：当父容器剩余空间不足时，子元素会按比例自动收缩宽度，适配父容器的可用空间。
上述代码里6个设置了200px宽度的子元素，会被自动压缩总宽度到适配父容器内容区的大小，不会超出父容器宽度，因此overflow-x: auto无法触发横向滚动。

给flex子元素设置禁止收缩，强制其保持设定的宽度即可，两种写法效果完全一致：

• 写法1：单独设置收缩规则，在.container div样式中新增flex-shrink: 0
• 写法2：使用flex简写属性，设置flex: 0 0 auto，对应含义为：flex-grow（放大比例）为0、flex-shrink（收缩比例）为0、flex-basis（基础尺寸）取元素设定的宽度值

修复后核心样式 #

.container div {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* 新增该行即可实现预期溢出滚动 */
}

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