Uploaded November 2025 | Updated September 2026, 2 hours ago

---

A brief guide for the upcoming 'stretch' value in CSS, which forces the element to take 100% width/height of the parent container while taking padding & margin into consideration, thus preventing unwanted overflow easily without using calc() or box-sizing.

🎨 Demo: codepen.io/ZoranJambor/pen/zxrVxOL
🔥 Guide to corner-shape CSS Property: youtu.be/oKcrTBjmOio
💡 Guide to Logical CSS Properties: youtu.be/cV9JhEV4Ll0

My Newsletters:
💌 CSS Weekly: css-weekly.com
🤖 AI Developer: aideveloperweekly.com

Help support my channel
💖 Become a member on Patreon: patreon.com/cssweekly
☕️ Buy Me a Coffee: buymeacoffee.com/cssweekly
🪧 Buy CSS Stickers pack: stickers.css-weekly.com
👨‍🎓 Get a course: masteringlinting.com

📖 Chapters
00:00 The problem with "width:100%" and overflow
00:36 How to fix border overflow using "box-sizing: border-box"
00:54 How to use the "calc()" function to fix overflow due to margin
01:29 How to use the "stretch" value to fix overflow due to margin
01:52 Browser support for "stretch" value
02:42 Should you use "stretch" value today?

Keep up-to-date with CSS Weekly:
🦋 Bluesky: https://bsky.app/profile/cssweekly.com/
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #csstips