AI 摘要：文章讨论 width: stretch 与 height: stretch 这两个新加入 CSS 标准的属性值。作者回顾其历史背景，说明它如何统一了过去 -webkit-fill-available 与 -moz-available 的实现，并探讨了它与 box-sizing: border-box 的区别、动画特性（animatable）以及当前的浏览器支持情况。文章指出，虽然 stretch 功能简单，但它解决了长期以来 width: 100% 受内边距影响导致溢出的问题，为布局控制带来了更直观、更可靠的选择。

1. stretch 的由来与标准化
• Chromium 浏览器自 2025 年 6 月起支持 stretch，统一了非标准属性 -webkit-fill-available 与 -moz-available。
• 在 @supports 出现之前，开发者难以根据浏览器正确选择对应实现。
• 这一特性被开发者 Dave Rupert 在 Bluesky 平台上重新发现，引起社区关注。

2. stretch 的工作机制
• 行为类似 width: 100%，但忽略 padding，因此不会因内边距造成溢出。
• 从技术上看，stretch 控制元素的 margin box 以匹配包含块的尺寸。
• 对比 box-sizing: border-box ：虽然二者可达相似效果，但 stretch 更语义化且更灵活。

3. 为什么考虑使用 stretch 而非通用 box-sizing
• 使用通配符选择器 * 设置 box-sizing: border-box 无法涵盖所有伪元素。
• 维护完整伪元素列表既繁琐又易错，而 stretch 可减少这类问题。
• 对某些场景而言，开发者可能希望保持 100% 不包含 padding 的默认行为。

4. 动画与过渡特性
• box-sizing 无法被动画化，但 stretch 可与 100% 间平滑过渡。
• 需启用属性 interpolate-size: allow-keywords 才能插值动画。
• 未来可通过 calc-size(stretch, size) 精确控制插值行为。

5. 浏览器兼容性与渐进增强方案
• 当前仅 Chromium 系列 (Opera 122+、Chrome/Edge 138+、Android 140+) 支持。
• 可通过 @supports 设置自定义属性 --stretch，为 Firefox 与 Safari 提供兼容实现。
• 一旦全面支持后，可直接使用 width: stretch。

6. 总结与开发者建议
• stretch 是一种小而实用的布局增强功能，提升工作流质量。
• 即使继续使用 box-sizing 也无妨，但理解并尝试新特性有助于优化设计思维。
• 多一种写法，意味着多一种选择，更贴合个人或项目的编码哲学。

CSS-Tricks

We Completely Missed width/height: stretch | CSS-Tricks

The TL;DR is that stretch does the same thing as declaring 100%, but ignores padding when looking at the available space.