flex: 1 本身不保证视觉等宽——因浏览器默认对 等替换元素施加 min-width: min-content，且 flex-basis: auto 会受内容尺寸干扰；需统一设 flex: 1 1 0、min-width: 0 和 box-sizing: border-box 才能强制三栏严格均分。

`flex: 1` 本身不保证视觉等宽——因浏览器默认对 `` 等替换元素施加 `min-width: min-content`，且 `flex-basis: auto` 会受内容尺寸干扰；需统一设 `flex: 1 1 0`、`min-width: 0` 和 `box-sizing: border-box` 才能强制三栏严格均分。

在实际开发中，许多开发者误以为给三个子元素同时设置 flex: 1 就能实现“绝对等宽”，但当你混用 、

等不同语义化元素时，布局常出现明显偏差：比如示例中直接作为 .hijo 的

明显比包裹在

内的按钮更宽。这不是 Flexbox 的 Bug，而是其底层计算逻辑与浏览器默认样式的共同作用结果。

? 根本原因：flex: 1 的真实含义被掩盖

flex: 1 是简写，等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%; /* 或 0 —— 推荐用 0，兼容性更稳 */

关键在于：flex-basis 决定“分配起点”。若为 auto（某些上下文或继承场景），浏览器会先按内容宽度（如按钮文字“child 2”）确定初始尺寸，再分配剩余空间——导致起点不一致，自然结果不等宽。而

元素在所有主流浏览器中默认拥有 min-width: min-content（即至少撑开到文字完整显示所需最小宽度），这会直接 override flex-basis: 0%，使 flex-shrink: 1 失效。

此外，你当前代码中虽写了 * { box-sizing: border-box; }，但若未显式声明 min-width: 0， 仍将拒绝压缩；而嵌套结构

...