This page will show and explain you why a overflow may happen in a css grid layout context.
#grid {
display: grid;
max-width: 100%;
gap: 1rem;
grid-template-columns: 1fr 1fr; /* two columns with same ratio fraction */
overflow: scroll;
}
#grid > * {
border: 1px solid;
padding: 1rem;
}
<div id="grid">
<div>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</pre>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
This overflow happens because a grid is a layout system based on a content minimum size 1) (as the float layout)
It means that:
The first column uses a pre element that never wraps its content by default. The minimum width is therefore the length of its text on one line, creating the overflow.
To avoid the minimum width/height calculation size, you should therefore set the minimum width or heigth to another value than auto.
Example with a minimum at 0px
#grid > * {
min-width: 0px;
}
This sizing calculation helps:
By default, a content-based minimum width could result in a large table or large image stretching the size of the entire content area, potentially into an overflow zone, and thereby making lines of text needlessly long and hard to read.
Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)