CODEWITHSUNDEEP
htmlcsscss-grid
The Codesee
The Codesee

Reputation: 3783

Prevent CSS grid from causing overflow

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>

Upvotes: 6

Views: 6739

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371231

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>

Upvotes: 4

Temani Afif
Temani Afif

Reputation: 272901

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>

Upvotes: 1

Related Questions