flex布局下，导致overflow-x失效

<div class=”tab”>
<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>

<style>
.tab{
width: 400px; height:50px;
display: flex;align-items: center;overflow-x: auto;
border: 1px solid #000;
}
.tab-item {
width:100px;height:30px;margin:0 10px;
background-color: red;color: #fff;text-align: center;
}
</style>

最终效果：

问题：外容器宽度只有400，item的数量是6个，且每一个宽度为100，应该只展示到tab4，出现横条滚动条。

解决：

在子元素中添加 flex: 0 0 auto;