Wat is CSS Stretch Sizing Generator?
Het CSS stretch-keyword (Chrome 138+) is de standaardwaarde voor fill-available-sizing en vervangt de vendor-prefixed -webkit-fill-available en -moz-available keywords. Wanneer u width: stretch instelt, wordt het element zo groot dat het de beschikbare ruimte vult met margin-box-sizing —het element past in het bevattende blok. Dit verschilt van width: 100% dat content-box-sizing gebruikt en vaak overloopt wanneer padding, border of margin aanwezig zijn. stretch werkt in block-, flex-, grid- en absoluut gepositioneerde lay-outcontexten.
Snel antwoord
Gebruik width: stretch of height: stretch voor gestandaardiseerde fill-available-sizing. In tegenstelling tot width: 100% gebruikt stretch margin-box-sizing, waardoor padding en border geen overflow veroorzaken. Vervangt -webkit-fill-available en -moz-available met een enkel gestandaardiseerd keyword. Chrome 138+, Firefox 130+, Safari 18.2+.
Last updated: 2026-05-30
Beperkingen
- Stretch wordt nog niet in alle browsers ondersteund. Chrome 138+, Firefox 130+ en Safari 18.2+ ondersteunen het. Houd vendor-prefixed fallbacks (-webkit-fill-available, -moz-available) en een width: 100%-fallback voor oudere browsers.
- Stretch werkt alleen op elementen met block-, flex-, grid- of absoluut gepositioneerd display. Inline-elementen, tabelcellen en vervangen elementen (img, video, iframe zonder expliciete formaatbepaling) ondersteunen stretch-sizing niet.
- In flex- en grid-contexten kan stretch onverwacht interageren met uitlijningseigenschappen. Een flex-item met align-self: stretch en width: stretch kan conflicterende formaatinstructies geven —het stretch-keyword op de formaateigenschap heeft voorrang op uitlijningsstretch.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Selecteer uw lay-outcontext —het gedrag van stretch verschilt licht tussen block-, flex-, grid- en absoluut gepositioneerde elementen.
- Kies de as die u wilt strekken (width, height of beide via inset: 0 voor abspos).
- Bekijk de lay-outspecifieke uitleg over hoe stretch interageert met margins, padding en het bevattende blok in uw gekozen context.
- Kopieer de gegenereerde CSS en vervang bestaande width: 100%-patronen of vendor-prefixed fill-available-declaraties.
Waarvoor je het kunt gebruiken
- Vervang width: 100% op een input- of select-element dat overloopt door padding en border —stretch gebruikt margin-box-sizing, waardoor de totale box in de container past.
- Standaardiseer cross-browser fill-available-sizing door -webkit-fill-available en -moz-available te vervangen door het standaard stretch-keyword.
- Laat een absoluut gepositioneerd element uitrekken tot de randen van zijn gepositioneerde voorouder zonder expliciete top/right/bottom/left-waarden.