Ahmad Shadeed avatar Ahmad Shadeed

The Minimum Content Size In CSS Grid

Screenshot of “The Minimum Content Size In CSS Grid”

https://ishadeed.com/article/min-content-size-css-grid/

Sometimes, while building a component, you suddenly notice a weird horizontal scroll bar. You keep trying and fixing the wrong thing, only to realize later that the cause is something else. How many times have you been there?

I don't know how many times, but it just happened today! Well, I saw it today, but I fear it's been there for a while.

On my archives page, the list of contents was overlaping the search filters when there was a long <pre> element:

Fortunately, I quickly found Ahmad's post about this behavior of CSS Grid where "the minimum content size of a grid item is auto, [which] means a grid item can expand its width due to long content".

After adding a simple min-width: 0 to the overlaping Grid item, it was fixed! 🎉

Thanks a lot Ahmad for sharing this!