为什么flex父元素的深层子节点不能使用fieldset标签？

问题根因 #

• 你混淆了flex布局min-width:0的作用对象：该属性需要加在flex子项上才能覆盖默认的min-width: auto特性，你仅给flex容器.dFlex添加了该属性，未给作为flex子项后代的fieldset添加。
• fieldset属于浏览器特殊内置标签，即便在新版浏览器中，仍然存在默认的最小宽度限制，优先级高于你设置的width:100%，会优先匹配内部不换行文本的实际宽度，最终撑爆父级宽度限制，导致两列布局偏移、text-overflow: ellipsis失效。

修复方法 #

仅需要在CSS中新增针对fieldset的min-width配置即可：

fieldset {
    min-width: 0;
}

如果需要同时重置fieldset的默认内置样式，可补充其他重置属性：

fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 1px solid #ccc; /* 可自定义边框样式，也可设为none */
}

修改后布局即可恢复正常，文本省略号效果也能正常生效。

内容的提问来源于stack exchange，提问作者hamid-davodi