如何避免flexbox布局溢出时子元素固定width被压缩，实现横向滚动？

Flex布局的子项默认开启了自动收缩机制，对应的flex-shrink属性默认值为1：当子项总宽度超过父容器宽度时，浏览器会自动按比例缩小所有子项的宽度，避免溢出，这就是你设置的固定width:200px失效的原因。

只需给flex子项添加flex-shrink: 0属性，关闭子项的自动收缩规则即可，无需修改你已有的宽度、margin配置。

修改后的完整CSS代码如下：

.flex{
  display:flex;
  width:100%;
  background:yellow;
  align-items:center;
  flex-wrap: nowrap;
  overflow:auto;
}

.flex div{
 width:200px;
 background:red;
 margin:0px 16px;
 /* 新增：禁止子项自动收缩 */
 flex-shrink: 0;
}

修改后子项会严格保留200px的固定宽度，总宽度超出容器时会触发你配置的overflow:auto规则，出现横向滚动条，原有margin样式完全生效。

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