Qué es Generador de dimensionamiento CSS stretch?
La palabra clave CSS stretch (Chrome 138+) es el valor estándar para el tamaño fill-available, reemplazando las palabras clave con prefijo -webkit-fill-available y -moz-available. Cuando establece width: stretch, el elemento se dimensiona para llenar el espacio disponible usando margin-box sizing, lo que significa que el margin-box del elemento encaja dentro del bloque contenedor. Esto difiere de width: 100% que usa content-box sizing y a menudo se desborda cuando hay padding, borde o margen. stretch funciona en contextos de layout block, flex, grid y posicionamiento absoluto.
Respuesta rápida
Use width: stretch o height: stretch para el tamaño fill-available estándar. A diferencia de width: 100%, stretch usa margin-box sizing, por lo que el padding y el borde no causan desbordamiento. Reemplaza -webkit-fill-available y -moz-available con una única palabra clave estandarizada. Chrome 138+, Firefox 130+, Safari 18.2+.
Last updated: 2026-05-30
Limitaciones
- stretch aún no es compatible con todos los navegadores. Chrome 138+, Firefox 130+ y Safari 18.2+ lo soportan. Mantenga alternativas con prefijo de proveedor (-webkit-fill-available, -moz-available) y un respaldo width: 100% para navegadores antiguos.
- stretch solo funciona en elementos con visualización block, flex, grid o posicionamiento absoluto. Los elementos inline, celdas de tabla y elementos reemplazados (img, video, iframe sin tamaño explícito) no soportan stretch.
- En contextos flex y grid, stretch puede interactuar inesperadamente con propiedades de alineación. Un flex item con align-self: stretch y width: stretch puede producir instrucciones de tamaño conflictivas: la palabra clave stretch en la propiedad de tamaño tiene prioridad sobre la alineación stretch.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Seleccione su contexto de layout: el comportamiento de stretch difiere ligeramente entre elementos block, flex, grid y posicionados absolutamente.
- Elija el eje que desea estirar (width, height, o ambos mediante inset: 0 para posicionamiento absoluto).
- Revise la nota específica del layout que explica cómo stretch interactúa con los márgenes, el padding y el bloque contenedor en su contexto elegido.
- Copie el CSS generado y reemplace cualquier patrón existente de width: 100% o declaraciones fill-available con prefijo de proveedor.
Para qué puedes usarla
- Reemplazar width: 100% en un input o select que se desborda de su padre debido al padding y borde: stretch usa margin-box sizing, por lo que la caja total encaja dentro del contenedor.
- Estandarizar el tamaño fill-available entre navegadores reemplazando -webkit-fill-available y -moz-available con la palabra clave estándar stretch.
- Hacer que un elemento con posicionamiento absoluto se estire hasta los bordes de su ancestro posicionado sin valores explícitos de top/right/bottom/left.