flex布局导致overflow属性失效问题

项目需求：

最近在项目中遇到一个需求，需要动态展示tab，并可手动添加tab，tab超出页面宽度时滚动加载。

方案：

利用弹性布局

//html部分
<div class="tab-con">
        <div class="tab-item">tab1</div>
        <div class="tab-item">tab2</div>
        <div class="tab-item">tab3</div>
        <div class="tab-item">tab4</div>
        <div class="tab-item">tab5</div>
        <div class="tab-item">tab6</div>
                        ...
</div>
//css部分
.tab-con {
        width: 100%;
        display: flex;
        border: 1px solid #000;
        height: 30px;
        align-items: center;
        overflow-x: auto;
 }
.tab-item {
        margin: 0px 10px;
        background-color: aqua;
        color: #fff;
   }

这样布局发现overflow-x并不生效

解决方法

给子元素（tab-item）加上 flex: 0 0 auto;

flex属性：
flex是flex-grow,flex-shrink,flex-basis个属性结合在一起的缩写形式,后两个属性可选写

flex-grow：当子元素的空间加起来小于父元素的空间，怎么处理剩下的空间：默认为0表示不占有剩余的空间；为1时标识平均分配剩下的空间；某个子元素为2其他子元素为1时，为2的子元素占用的空间时其他子元素的2倍。当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间。

flex-shrink：表示当子元素的空间大于父元素的空间时,如何缩小子元素：默认值为1表示等比缩小
当所有子元素都设置为1时所有子元素都会等比例缩小：当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小。

flex-basis：用于设置元素占据主轴的空间即width，如果width和flex-basis同时设置，即width会被覆盖掉，如果设置auto元素占据的主轴大小就是元素实际的大小，相当于width:auto，如果设定了固定值则元素的width就是设置的值。

原文链接：https://blog.csdn.net/weixin_44705310/article/details/120176510