Flexbox容器横向滚动实现：flex子项宽度设置失效问题咨询

问题本质：Flex布局下子项的两个默认约束，会直接导致设置的width属性失效：

• 子项默认flex-shrink: 1，当容器主轴空间不足时，所有子项会被按比例压缩，无法保持设定的700px宽度
• 子项默认min-width: auto，会以子项自身内容的最小固有宽度作为渲染边界，进一步限制宽度属性的生效空间
  你之前通过补充min-width属性解决问题，本质是打破了第二个默认约束。除此之外，还有几种开发中常用的实现方式：

• 给Flex子项设置flex-shrink: 0
  这是做横向滚动列表最常用的写法。将子项的收缩系数设为0后，浏览器不会在空间不足时压缩子项尺寸，子项会严格按照设定的700px宽度渲染。当多个子项的总宽度超过容器宽度时，自然会触发容器的横向滚动。
  对应代码：

.item{
    border:1px solid green;
    margin:5px;
    width:700px;
    flex-shrink: 0;
}

• 给Flex子项设置flex: none
  这是更简洁的等效写法，flex: none等价于将子项的伸缩增长、收缩系数全部设为0，完全禁用子项的自动伸缩能力，让子项严格按照自身设定的尺寸渲染，和上述flex-shrink: 0的效果完全一致。
  对应代码：

.item{
    border:1px solid green;
    margin:5px;
    width:700px;
    flex: none;
}

• 用flex-basis替代width指定子项尺寸，配合关闭收缩
  Flex布局下，flex-basis是专门用于定义子项在主轴方向初始尺寸的属性，优先级高于普通的width属性。配合flex-shrink: 0使用时，子项的宽度会被更稳定地按照设定值渲染，不会出现被意外压缩的问题。
  对应代码：

.item{
    border:1px solid green;
    margin:5px;
    flex-basis: 700px;
    flex-shrink: 0;
}

• 从容器层面适配内容宽度，将滚动逻辑移至外层
  不需要修改任何子项属性，直接让Flex容器的宽度完全匹配所有子项的总宽度，再给容器的外层包裹元素设置overflow: auto，同样可以触发横向滚动效果。
  对应代码：

/* 外层包裹元素承担滚动职责 */
.scroll-wrapper {
  overflow: auto;
}
#container{
  border:1px solid red;
  display:flex;
  width: max-content; /* 容器宽度自动匹配所有子项的总宽度 */
  min-width: 100%; /* 保证容器在内容不足时也能撑满外层宽度 */
}

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