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

利用弹性布局

这样布局发现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