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: scroll and width:100% set on our flex layout(the nested scroll-container), we still can't scroll, and the layout looks broken. This is because the minimum content size of a grid item is auto, meaning that a grid item can expand its width to contain its children, which in this case is our scrolling container(without overlapping content). The styles of overflow: scroll and width:100% never get applied because the flex scroll container is within our grid item, the rules of minimum-content on grid items override our attempt to create a scroll container.

Minimum content size can be said to be the css 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 prevents the grid item from respecting the default minimum content size.

2. use minmax(0, 1fr) minmax(0, 1fr) not 1fr 1fr when defining grid columns. Using only 1fr for our grid columns allows our grid item to be as wide as they can if they have none overlapping content(e.g a flex layout).

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

You can play around with the code pen 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 child items shrink now because the parent(i.e the grid item) 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.😊