Preventing a grid blowout

Make sure that column has a definite minimum width instead of auto:

.grid {
  /* auto minimum width, causing problem */
  grid-template-columns: 1fr 300px;

  /* fix: minimum width of 0 */
  grid-template-columns: minmax(0, 1fr) 300px;
}

or put it on the element that occupies that grid column:

element {
  min-width: 0;
}

when e.g. pre is inside that element. Attempting to limit pre width with max-width: 100% isn’t going to help.


https://css-tricks.com/preventing-a-grid-blowout
This site uses cookies.