弹性物料的自动最小尺寸
您遇到了flexbox默认设置。
伸缩项目不能小于其内容沿主轴的大小。
默认值为…
min-width: auto
min-height: auto
…分别用于行方向和列方向的弹性项目。
您可以通过将弹性项目设置为来覆盖这些默认值：
min-width: 0
min-height: 0
overflow: hidden
（或其他任何值，除外visible
）
Flexbox规格
4.5。 自动伸缩物品的最小尺寸
为了为弹性商品提供更合理的默认最小尺寸，此规范引入了一个新
auto值作为CSS 2.1中定义的min-width和min-height属性的初始值。
关于auto
价值…
在柔性项，它
overflow是visible在与主轴线，当在柔性项的主轴最小尺寸属性指定，指定了一个 自动的最小尺寸 。否则计算为0。
换一种说法：
- 在
min-width: auto
和min-height: auto
违约时才适用overflow
的visible
。 - 如果
overflow
值不是visible
，则min-size属性的值为0
。 - 因此，
overflow: hidden
可以代替min-width: 0
和min-height: 0
。
和…
- 最小尺寸算法仅适用于主轴。
- 例如，
min-height: auto
默认情况下，行方向容器中的flex项目不会获得。 - 有关更详细的说明，请参阅此帖子：
- 最小宽度渲染在flex-direction：行和flex-direction：列上有所不同
您已应用min-width：0，但项目仍然没有缩小？
嵌套式弹性容器
如果要在HTML结构的多个级别上处理弹性项目，则可能有必要在较高级别的项目上覆盖默认值
min-width: auto/
min-height:auto。
基本上，带有的较高级别的柔韧性商品
min-width: auto可以防止嵌套在下方的商品收缩
min-width: 0。
浏览器渲染说明
- Chrome与Firefox / Edge
从2017年开始，Chrome似乎（1）恢复为
min-width:0/
min-height:0默认值，或者（2）
0在某些情况下根据神秘算法自动应用默认值。结果，这就是他们所说的一种干预。）因此，许多人看到他们的布局（特别是所需的滚动条）在Chrome中工作正常，但在Firefox /Edge中却没有。
- IE11
正如规范所指出的，
auto对价值
min-width和
min-height性质是“新”。这意味着某些浏览器可能仍
0默认情况下呈现值，因为它们在值更新之前实现了flex布局
0，
min-width并且
min-height是CSS2.1中和的初始值
修改后的演示
.container { display: flex;}.col { min-height: 200px; padding: 30px; word-break: break-word}.col1 { flex: 1; background: orange; font-size: 80px; min-width: 0; }.col2 { flex: 3; background: yellow}.col3 { flex: 4; background: skyblue}.col4 { flex: 4; background: red}<div > <div >Lorem ipsum dolor</div> <div >Lorem ipsum dolor</div> <div >Lorem ipsum dolor</div> <div >Lorem ipsum dolor</div></div>
