当内容超出宽度时实现横向滑动效果

当内容超出宽度时，可以横向滚动

• 我们经常会遇到内容超过高度时，页面出现滚动条，通过滚动条来继续浏览内容，比如当前页面就是。很简单，设置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;