Prevent CSS grid from causing overflow

Question

I have a CSS grid, but I'm finding that the grid rows are not all fitting onto the page - instead, they're causing an overflow. How can I resize the grid rows so that they don't overflow the page? I thought the 1fr value was supposed to do this, but it doesn't seem to be working in my code.

I've had a look at Prevent content from expanding grid items and tried the suggested answers there (such as changing grid-template-rows: repeat(5, 1fr) to grid-template-rows: repeat(5, minmax(0, 1fr)); but to no avail.

I've tried adding height: 100% to the grid and it's container, but it is still overflowing.

JsFiddle https://jsfiddle.net/4g9b2qkL/

body,
html {
  margin: 0;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  height: 100%;
}

#right {
  grid-column: 2 / 3;
  height: 100%;
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: 100%;
}

img {
  max-height: 100%;
  max-width: 100%;
}

<div id="container">
  <div id="left">
    <p>
      Some stuff on the left....
    </p>
  </div>
  <div id="right">
    <h1>
      Title
    </h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">
        Result 2
      </div>
      <div class="result">
        Result 3
      </div>
    </div>
  </div>
</div>

Michael Benjamin · Accepted Answer · 2020-06-11 20:45:35Z

A few things to consider:

missing height reference

Using a percentage value to set the height of the img is problematic because there is no defined height on the container. Generally speaking, percentage heights should have a height reference on the parent for reliable rendering. Your declarations may or may not be ignored / misinterpreted.

See: Working with the CSS height property and percentage values

`height: 100%`

Setting the #results element to height: 100% is problematic, if you want to prevent a vertical overflow, because it doesn't factor in the height of the sibling (the h1).

height: 100% + height of h1 title > height of container (resulting in an overflow)

use a flexible height instead

Instead of using a percentage height, set a more flexible height, such as flex-grow. This tells the container to simply consume remaining space.

override the minimum height default

Grid and flex items are set by default to stop shrinking at the size of their content. Override that setting with min-height: 0.

See: Why don't flex items shrink past content size?

cross browser compatibility

Chrome can do the layout with less code (than posted below). It makes more assumptions about an author's intentions. Firefox, Edge and Safari assume less, so require more rules.

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100vh;
}

#left {
  background: lightblue;
}

#right {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

#results {
  flex-grow: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.result {
  min-height: 0;
}

img {
  max-width: 100%;
  max-height: 100%;
}

body {
  margin: 0;
}

<div id="container">
  <div id="left">
    <p>Some stuff on the left....</p>
  </div>
  <div id="right">
    <h1>Title</h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">Result 2</div>
      <div class="result">Result 3</div>
    </div>
  </div>
</div>

Temani Afif · Accepted Answer · 2020-06-11 20:13:00Z

You need to consider min-height:0 in different places and make some adjustment like below:

body,
html {
  margin: 0;
  height: 100%;
}

#container {
  display: grid;
  grid-template-columns: 1fr 5fr;
  height: 100%;
}

#left {
  grid-column: 1 / 2;
  background: lightblue;
  /*height: 100%; removed */
}

#right {
  grid-column: 2 / 3;
  /*height: 100%; removed */
  min-height:0; /* here */
  /* added */
  display:flex;
  flex-direction:column;
  /**/
}

#results {
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  /*height: 100%; removed */
  flex-grow:1; /* added */
  min-height:0 /* here */
}
.result {
  min-height:0 /* here */
}

img {
  max-height: 100%;
  max-width: 100%;
}

<div id="container">
  <div id="left">
    <p>
      Some stuff on the left....
    </p>
  </div>
  <div id="right">
    <h1>
      Title
    </h1>
    <div id="results">
      <div class="result">
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/62/Paracas_National_Reserve%2C_Ica%2C_Peru-3April2011.jpg" />
      </div>
      <div class="result">
        Result 2
      </div>
      <div class="result">
        Result 3
      </div>
    </div>
  </div>
</div>

Collectives™ on Stack Overflow

Prevent CSS grid from causing overflow

2 Answers 2

missing height reference

`height: 100%`

use a flexible height instead

override the minimum height default

cross browser compatibility

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

missing height reference

height: 100%

use a flexible height instead

override the minimum height default

cross browser compatibility

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`height: 100%`