CSS写出区域横向滚动效果，并不显示滚动条

 

 HTML结构

        <div class="wrap flex">
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
             </div>        

CSS代码

.wrap {
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x:scroll;
  //去除横向滚动条
  &::-webkit-scrollbar {
    display: none;
  }
  div {
    height: 100px;
    width: 100px;
    flex-shrink:0;//item 一行显示时不压缩宽度
    background-color: #ccc;
    margin-right:10px;
  }
}