flex布局子元素宽度被压缩

使用 flex 布局， 当子元素超过一屏时，子元素会去挤压别的兄弟元素。

解决方案：

flex-shrink: 0;

解释：

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-shrink 属性定义了项目的缩小比例，默认为 1 ，即如果空间不足，该项目将缩小，它还有另外一个值 0 。如果在子元素的css样式中添加 flex-shrink 属性， 然后把值改为 0，那么当前元素就不会被其他子元素挤压。

示例代码：

<div className="lists">
  <div className="lists-item">{item1}</div>
  <div className="lists-item">{item2}</div>
  <div className="lists-item">{item3}</div>
  <div className="lists-item">{item4}</div>
  <div className="lists-item">{item5}</div>
  <div className="lists-item">{item6}</div>
</div>

.lists {
  min-width: 100%;
  height: 100%;
  overflow-x: scroll;
  display: flex;
  .lists-item {
    flex-shrink: 0;
    width: 130px;
    height: 130px;
    background: #ffffff;
  }
}

关于 flex-shrink 的详细解释：MDN: flex-shrink