还在为宽度100%溢出头疼，那必须试试CSS新属性stretch？

在捣鼓页面布局的时候，是不是经常碰到这种糟心事儿：明明给元素设了个宽度100%，结果它却像个调皮鬼一样，直接超出父容器，把页面撑得乱七八糟。瞅瞅这个脑壳疼的场景，一个带着内边距的盒子，宽度设成100%，好家伙，实际占的地儿直接变成了100%加上左右内边距，不溢出才怪。以前咱们可能第一反应就是上那个“box-sizing: border-box”的全局重置大法，把这问题摁下去。但今天要给大伙安利一个在2025年6月Chromium浏览器里悄悄上线的新伙计——stretch，这玩意儿处理起这种宽度溢出问题，简直不要太清爽。

stretch是个什么神仙属性？

简单来说，stretch这哥们儿干的事儿，就是让元素的宽度（或高度）老老实实等于它的包含块（父容器）的宽度，而且最妙的是，它能把咱们设的内边距（padding）给刨出去。以前写width: 100%，那是元素内容盒子（content-box）的100%，内边距和边框都得往上加，所以才会爆。而stretch瞄的是“外边距盒子（margin box）”，直接让它跟父容器一般宽，内边距自动被包含在内，再也不用担心因为加了padding就把页面撑得稀烂了。这就像以前租房算的是套内面积，房东还得跟你算公摊；现在直接给你一个“实用面积”100%，舒服吧？

实操：手把手救活那个溢出的盒子

咱们直接上手撸代码，看这玩意儿怎么把问题摆平。想象一下，有个卡片，右侧想留一大片空白，左边也得有点呼吸感，于是加了个大内边距。

/* 之前让人头秃的写法 */
.box {
  padding: 3rem 50vw 3rem 1rem;
  width: 100%; /* 这货会变成 100% + 50vw + 1rem，直接溢出屏幕 */
  background: #f0f0f0;
}

这段代码一运行，盒子右边绝对会多出一大截滚动条。因为浏览器计算宽度时，是先把100%算出来，再把内边距加上，不爆才怪。现在，把width的值换成stretch。

/* 救场如救火，stretch登场 */
.box {
  padding: 3rem 50vw 3rem 1rem;
  width: stretch; /* 完美，内边距被吃掉，宽度老老实实等于父容器宽 */
  background: #f0f0f0;
}

就这么一改，页面瞬间正常了。stretch直接告诉浏览器：“甭管内边距多大，你给我的总宽度就得跟我爹一样宽”。操作路径清晰到令人发指：找到那个加了padding和width:100%就溢出的元素，把width:100%删了，替换成width:stretch。完事儿。在写这段代码的时候，需要留个心眼，这属性目前主要是在Chromium内核的浏览器里支持得比较溜（比如Chrome、Edge 138+版本），如果在老版本或者非Chromium浏览器里，这行代码可能不认，但别慌，后面会讲怎么兜底。

硬核备胎方案：兼容玩法

虽然stretch用起来很爽，但万一遇到浏览器不买账的情况，也不能干瞪眼。这里有一份万金油式的写法，利用了@supports和自定义属性，能根据浏览器自动派发最合适的“宽高填充”指令。这操作就像出门带了个万能插座转换头，到哪儿都能用。

/* 在全局定义一套“拉伸”大法 */
:root {
  /* 火狐老铁先用这个 */
  @supports (width: -moz-available) {
    --stretch-value: -moz-available;
  }

  /* Safari老哥用这个 */
  @supports (width: -webkit-fill-available) {
    --stretch-value: -webkit-fill-available;
  }

  /* Chromium新贵直接用stretch */
  @supports (width: stretch) {
    --stretch-value: stretch;
  }
}

/* 然后放心大胆地用这个自定义属性 */
.box {
  padding: 3rem 50vw 3rem 1rem;
  width: var(--stretch-value);
  background: #f0f0f0;
}

这套方案的精髓在于，它不是一个硬编码的值，而是一个动态的变量。浏览器会自己检查自己支持哪个关键字（-moz-available、-webkit-fill-available还是stretch），然后把对应的值赋给--stretch-value。日后等stretch全面普及，直接把:root里那一坨@supports删了，把.box里的width改成stretch就完事，代码干干净净。

解锁隐藏技能：让stretch动起来

光能填满宽度还不够，有时候还想要点丝滑的过渡效果。以前用box-sizing是搞不定动画的，但stretch作为关键字，配合一个新鲜属性interpolate-size，就能实现从固定宽度到“自动拉伸”的平滑过渡。这感觉就像开了个特效，让布局变化不再生硬。

首先，需要在根元素上开启这个“插值”开关：

:root {
  /* 激活关键词动画 */
  interpolate-size: allow-keywords;
}

然后，就能愉快地给stretch做过渡动画了。比如一个按钮，平时宽度是固定100px，鼠标悬停时让它拉伸填满父容器。

.button {
  width: 100px;
  transition: width 0.3s ease;
  background: #007bff;
  color: white;
  padding: 0.5rem 1rem;
}

.button:hover {
  width: stretch; /* 悬停时平滑地拉伸填满 */
}

这么一搞，鼠标放上去，按钮宽度就会流畅地“唰”一下展开，视觉效果非常nice。需要注意的点是，interpolate-size这个属性在写的时候要放在:root上才能全局生效，另外这个特性比较新，跟stretch一样，得留意一下浏览器版本。

为什么可以跟box-sizing说拜拜？

可能有人会问，一个box-sizing: border-box不是也能解决溢出吗？干嘛还要费劲用stretch？这么说吧，border-box是个全局“大扫除”，它把整个网站所有元素的盒子模型都改了，虽然省事，但有时候也会带来一些莫名其妙的“副作用”。比如，碰到某些第三方组件或者老代码，它们可能默认就是content-box，这时候全局重置就得费力去“反重置”。

另外，stretch跟动画配合得天衣无缝，这是border-box做不到的。还有一点，stretch只作用在需要拉伸的单个元素上，非常精准，不会有“误伤”。要是实在怀念border-box那种一刀切的感觉，那继续用也没毛病，萝卜青菜各有所爱嘛。不过，追求更精细控制、想玩点动画效果的，stretch绝对是个值得尝试的新玩具。

瞅瞅这波浏览器支持啥情况

目前这个属性的“完全体”stretch，主要是在Chromium家族里欢快地跑着。具体版本可以瞅瞅这个表，心里有个数：

好在有上面那个@supports的备胎方案兜着，写代码的时候完全不用慌，直接把最稳妥的兼容写法怼上去，等时机成熟了再一刀切。现在前端圈就是这么玩的，新特性先拿兼容层包一下，该用就用，爽就完了。