inline-size 与百分比宽度

上一条声明把盒模型还原成 content-box，宽度的写法随之受限。inline-size: 100% 在这个盒模型下会让控件溢出容器，而配方给出的解法是 stretch 关键字与它的前缀别名连写两行。

1 · 百分比作用在内容区上

百分比宽度解析的是 containing block 的 inline 尺寸，赋给的则是当前盒模型所指的那个盒。content-box 下这个盒是内容区：inline-size: 100% 意味着内容区宽等于容器宽，padding 与 border 只能加在外面。

400px 宽的容器里放一个 padding: 1em、1px 边框的控件，实测边框盒宽 434px，溢出 34px。这个 34 不随容器宽度变化——它恒等于 ${2} \times 16 + 2 \times 1$，即 padding 与 border 的横向总和。容器越窄，溢出占的比例越刺眼。

2 · stretch 撑满的是 margin box

stretch 关键字的定义换了一个对象：它让margin box 填满 containing block 的对应尺寸，浏览器倒推内容区该有多宽。同样的 400px 容器里，控件边框盒实测 400px，内容区 366px，不溢出。

结果与 box-sizing: border-box 加 width: 100% 一致，但代价不同：后者要求整个元素换盒模型，而换盒模型正是上一条声明刚刚撤销的事。stretch 让宽度的写法与盒模型解耦，两条声明因此可以共存。

3 · 两行连写不是笔误

配方里这两行紧挨着：

inline-size: -webkit-fill-available;
inline-size: stretch;

同一属性连写两次是 CSS 里最基础的回退技法：认识后一行的浏览器用后一行，不认识的把它当无效声明丢弃、留住前一行。配方需要它，是因为两个名字的落地进度不同（兼容性据 MDN BCD，核对于 2026-09）：

• -webkit-fill-available：Chromium 系自 22（2012）起，Safari 自 7（2013）起，Firefox 自 146（2025-12）起（核对于 2026-09）
• 无前缀 stretch：Chromium 138（2025-06）、Safari 27，Firefox 尚未实现（核对于 2026-09）

也就是说，此刻把两行换成任意一行都会丢掉一批浏览器：只写 stretch，Firefox 落空；只写前缀名，未来移除别名的浏览器落空。Firefox 更早的版本还有 -moz-available 别名，本页未实测，配方也没带它。