- 我们经常会遇到内容超过高度时，页面出现滚动条，通过滚动条来继续浏览内容，比如当前页面就是。很简单，设置css属性
overflow-y: auto;就可以实现。 - 而如果想要内容不换行，当超过宽度，横向滚动呢，
overflow-x: auto;就不能实现了，因为默认会换行。 - 话不多说，直接上代码。
<!--使用了vue，这里的重点应是css-->
<div class="content">
<div v-for="prizeItem in taskItem.prizeList" class="prize-item">
<div class="img">
<img src="../assets/images/test-gold.png">
</div>
<div class="amount">{{ prizeItem.amount }}</div>
</div>
</div>
.content {
padding: 0 20px;
position: absolute;
left: 0;
bottom: 7px;
width: 570px;
height: 110px;
// 重点，为了不会换行显示
display: flex;
overflow-x: auto;
overflow-y: hidden;
}
.prize-item {
// 重点，为了不会被压缩大小
flex-shrink: 0;
margin-right: 10px;
position: relative;
display: inline-block;
width: 109px;
height: 109px;
background-image: url("../assets/images/bg-prize.png");
background-size: contain;
background-repeat: no-repeat;
}
总结：
- 1.在父类设置
display: flex;
overflow-x: auto;
overflow-y: hidden;
- 2.在子类设置
flex-shrink: 0;
