
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.
Remember Everything You Learn from Podcasts
Save insights instantly, chat with episodes, and build lasting knowledge - all powered by AI.