flex-shrink是否存在收缩下限？Flex布局子元素不收缩问题咨询

问题原因 #

Flex布局中，flex子项有默认的min-width: auto规则，该规则会限制子项的最小宽度不能小于其内部内容的最小不可收缩宽度（包括文本、内边距、边框等的宽度总和）。
你代码里4个item的最小可收缩宽度总和刚好约为200px，所以当容器宽度大于这个值时，flex-shrink规则正常生效；当容器宽度小于等于这个总和时，子项被min-width: auto限制无法继续收缩，就会出现你观察到的不再触发收缩的现象。

解决方法 #

在.item的CSS规则中显式设置min-width: 0，覆盖默认的min-width: auto，允许子项收缩到内容宽度以下即可。
修改后的.item规则如下：

.item {
    width: 90px;
    background-color: #ddd;
    margin: 10px; 
    padding: 10px 15px;
    text-align: center;
    font-family: Arial;
    min-width: 0; /* 新增该行规则 */
}

如果需要控制子项最小收缩到指定宽度，也可以把0替换成你需要的宽度值，比如min-width: 30px。

内容的提问来源于stack exchange，提问作者Lshiroc