AI-powered
podcast player
Listen to all your favourite podcasts with AI-powered features
The CSS Podcast
69: Why is it overflowing?
Aug 16, 2023
Una Kravets, co-host, discusses overflowing content on web pages, flex layout issues, addressing overflowing elements with CSS techniques and tools, understanding how transforms cause overflow, the importance of max width and max height, and useful DevTools tips for troubleshooting overflow problems.
15:04
Episode guests
AI Summary
AI Chapters
Episode notes
Podcast summary created with Snipd AI
Quick takeaways
- Code snippets with white-space: nowrap or white-space: pre can cause horizontal scrolling, but using white-space: pre-wrap or changing width behavior can address this issue.
- When using display: flex, set flex-wrap to wrap and use flex-basis to allow shrinking or growing of items to avoid overflow issues.
Deep dives
Managing Overflow in Code Snippets
One common challenge is dealing with embedded code snippets that cause horizontal scrolling on the page. Code snippets often have pre and code tags with white-space: nowrap or white-space: pre, which make the text wider than the viewport. To address this, you can apply white-space: pre-wrap to force wrapping, or allow the element to shrink and display a scroll bar by changing its width behavior. When pre tags are inside a flex container, you may need to add a minimum width or minimum inline size to make them shrink beyond their minimum content size.
Get the Snipd
podcast app
Unlock the knowledge in podcasts with the podcast player of the future.
AI-powered
Discover
highlights
Listen to the best highlights from the podcasts you love and dive into the full episode
Save any
moment
Hear something you like? Tap your headphones to save it with AI-generated key takeaways
Share
& Export
Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more
AI-powered
podcast player
Listen to all your favourite podcasts with AI-powered features
Discover
highlights
Listen to the best highlights from the podcasts you love and dive into the full episode