Fix for css grid item Overflow

The problem

I recently ran into an interesting problem when creating scroll containers. I've created a ton of scroll containers but for some reason, I couldn't get this to work. This usually happens when we have a scroll container nested in a grid item.

Even though we have overflow: auto set on our flex layout, it doesn't seem to work, our layout still looks broken. This is because the minimum content size of a grid item is auto. This means a grid item can expand its width to contain its children, which in this case is our scrolling container.

Minimum content size can be said to be the min-content keyword. MDN says the min-content sizing keyword represents the intrinsic minimum width of the content. For text content this means that the content will take all soft-wrapping opportunities, becoming as small as the longest word. The min-content here is controlled by min-width.

If we give a div min-width: 400px and also give it width: min-content we discover that the size(width) of the div is reduced to our min-width. Let's look at the UI again.

The minimum content size, min-content keyword and the min-width property in a way describes the same thing. We can now say that by default grid items have min-width of auto, min-width of auto on a grid item basically means be as wide as your children.

There are a couple of ways to fix this overflowing grid item problem, the first and second one involves adding a fixed minimum content size.

1. use a min-width:0 on the grid-item, this tells it to start from 0 and grow till it's max-content(making use of any soft-wrapping opportunities) i.e the container in this case.

2. use minmax(0, 1fr) minmax(0, 1fr) not 1fr 1fr when defining grid columns.

3. add an overflow property to the grid item with a value that is not visible.

You can play around with the codepen to get a better feeling for this.

After using one of the fixes, try changing the min-width property of this selector .flex > * to width. The flex-shrink property kicks in now because the parent of our flex-layout now has a limit.

This brings us to a close on this issue, thanks for reading. I'm always open to suggestions, please leave them in the comments.😊