How to solve a CSS grid overflow ?

Overflow example

• This simple example shows:
  • a two columns grids
  • that should have the same space because they get the same fraction
    • 1fr for the first one with a pre element (that never wraps))
    • 1fr for the second one with a div element

#grid {
  display: grid;
  max-width: 100%;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;  /* two columns with same ratio fraction */
  overflow: scroll;
}

• This rule add a border and a padding to the grid items to see their space.

#grid > * {
  border: 1px solid;
  padding: 1rem;
}

• The html with:
  • the grid element id=grid
  • and two grid items (ie two div children)

<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>

• And as you can see the first column is overflowing into the right side of the page.

Why ? Because Grid is a content-based minimum size layout

This overflow happens because a grid is a layout system based on a content minimum size ¹⁾ (as the float layout)

It means that:

• the grid items have a property value of min-width and min-height set to auto ²⁾
• ie the minimum width/height of the grid item is based on the content

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.

Solution, set an explicit minimum not to auto

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;
}

• And as you can see:
  • the first column does not overflow anymore.
  • the two columns share 50% of the space as specified in the fraction.

Content-based minimum size and layout

This sizing calculation helps:

• prevent content from overlapping or spilling outside its container
• unless the layout is being used for a major content area of a document. In this case, you should set an explicit minimum.

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.

Performance considerations

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.)