使用 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
