fieldset的min-inline-size: min-content是浏览器ua样式强制添加的默认规则，导致其无法收缩；必须用fieldset{min-width:0}显式覆盖才能解决flex/grid中宽度异常问题。
fieldset 的 min-inline-size: min-content 是什么鬼
这不是你写的 CSS，是浏览器 UA 样式硬塞进去的。Chrome、Firefox、Safari 都给 fieldset 默认加了 min-inline-size: min-content（等价于 min-width: min-content），导致它“不肯收缩”——哪怕你写了 width: 200px，内容稍宽一点就自动撑开，尤其在 Flex 或 Grid 容器里特别明显。
这个行为和 box-sizing 完全无关，重设 box-sizing: border-box 对它没任何影响。根源就是这条 UA 规则优先级太高，通配符或普通类选择器根本压不住。
- DevTools 里检查 computed 样式，
min-width一栏如果显示 “min-content”，来源基本就是 UA 样式 - 在 Safari 中表现最顽固，即使父容器设了
flex: 1，fieldset也常卡在“最小内容宽”不动 - 和
legend位置冲突：当legend文字较长时，min-content会把它算进最小宽度，进一步加剧溢出
必须显式覆盖 min-width 和 width 行为
不能靠继承或全局 reset，得用足够高优先级的选择器直接干掉它：
- 写
fieldset { min-width: 0; }—— 这是最小代价的修复，关闭 UA 的“保护机制” - 如果需要固定宽度，必须同时写
width: 300px; min-width: 0;，只写width在 Safari 下可能仍被忽略 - 在 Flex 布局中，若
fieldset是子项，额外加min-width: 0;能防止 Safari 触发min-content回退逻辑 - 避免用
max-width单独约束——它不压制min-content，反而可能造成截断+滚动条
和第三方 UI 库共存时怎么避免冲突
Ant Design、Element Plus 等库通常会在 form 组件内部对 fieldset 做隐式重置，但不会暴露出来。如果你自己写了 fieldset { min-width: 0; }，反而可能破坏它们的布局逻辑。
- 先打开 DevTools，看 computed 样式里
min-width的来源是 UA、你的 CSS 还是第三方样式（比如ant-form-item下的规则） - 若已由库处理，删掉自己的重置；若没处理，再加
min-width: 0 - Bootstrap 5 不碰
fieldset，但它的.form-group容器可能间接影响，建议把min-width: 0放在更具体的选择器下，比如.my-form fieldset
IE8–11 的兼容性陷阱
IE8 不识别 min-inline-size，但它有另一套问题：把 fieldset 当作“不可压缩块”，哪怕你写了 width: 100%，它也会因默认 padding 和 border 撑出额外空间。
- IE8 必须用
min-width: 0\9;（带 hack 后缀）才能生效，否则整个声明会被忽略 - 禁用
em或百分比单位的padding，全部改用px，否则 IE8 计算错乱 - 不要和
box-sizing: border-box写在同一声明块里——IE8 直接跳过整条规则
真正麻烦的不是写几行 CSS，而是每次改完都要在 Chrome、Firefox、Safari 和至少一个旧版 IE 上点开 DevTools 看 computed 样式——min-width 和 padding 的来源必须亲手确认，不能猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
