子元素不换行滚动

一、使用 white-space: nowrap 属性

<div class="box-1">
   <div class="item item-1"></div>
   <div class="item item-2"></div>
</div>

<style lang="scss" scoped>
.box-1 {
  margin: 0 auto;
  width: 400px;
  margin-bottom: 30px;
  white-space: nowrap;
  overflow-x: scroll;
  .item {
    width: 330px;
    height: 50px;
    display: inline-block;
  }
  .item-1 {
    background: gainsboro;
    margin-right: 8px;
  }
  .item-2 {
    background: goldenrod;
  }
}
</style>

效果图：

二、使用 display: flex 属性

问题：父元素设置 flex 时，子元素宽度失效

原因：

        当父元素设置display:flex; 时，其内所有子元素都会加上 flex-shrink 属性，该属性定义了在项目空间不足时缩小比例，默认为1。

        就是说，如果空间不足的情况下，所有的子元素会等比例的缩小，所以子元素宽度才会失效。

解决：

       给子元素添加flex-shrink: 0;属性

<div class="box-2">
   <div class="item item-1"></div>
   <div class="item item-2"></div>
</div>

<style lang="scss" scoped>
.box-2 {
  margin: 30px auto 0;
  width: 400px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;

  .item {
    flex-shrink: 0;
    margin-right: 10px;
    width: 330px;
    height: 50px;
    background: saddlebrown;
  }
}
</style>

效果图：