实现div横向排列不换行并能滚动展示

1.html

        

            

              
                {{ item.departmentDescr }} 
              
          
        

2.css

.tab-box{
   height: 62px;
   line-height: 62px;
   width: calc(100vw - 40px);
   padding: 0 20px;
   overflow-y: hidden ;
   overflow-x:scroll;
   &::-webkit-scrollbar{
      display: none;
   }
   .tab-one{
     white-space:nowrap;
     div{
      display: inline-block;
     }
   }
}

注意：
在最外层div .tab-box 设置宽度 且overflow-x:scroll

在第二层div .tab-one不设置宽度 且white-space:nowrap

在第三层元素随意设置宽度

(如果用nowrap时候 第三层元素 不能设置float)

(如果用非要 第三层元素 设置float实现横排的话 .tab-one设置一个很大的宽度 容下所有第三层元素 )