CODEWITHSUNDEEP
htmlcssoverflowcss-grid
jai_
jai_

Reputation: 59

How to prevent css grid column from exceeding max-height of the grid container?

I have a CSS grid layout as follows here: https://codepen.io/anon/pen/KogEaq

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #222525;
  color: white;
}

#container {
  display: grid;
  grid-template-columns: 27fr 78fr;
  max-height: 100vh;
}

#left {
  grid-row: 1;
  grid-column: 1;
}

#right {
  grid-row: 1;
  grid-column: 2;
  max-height: 100%;
}

.box {
  margin: 8px;
  padding: 8px;
  border-radius: 10px;
  border: blue solid 2px;
  overflow-y: auto;
  max-height: 100%;
}
<div id="container">
  <div id="left">
    <div class="box">
      Navigation sidebar stuff here
    </div>
  </div>
  <div id="right">
    <div class="box">
      Page content
    </div>
  </div>
</div>

The page is intended to be a single page app and the body should not scroll. When the page content becomes large, I wish for the contents in the .box class to scroll.

The problem is, the .box and the parent #right column within the #container grid seem to exceed the max-height set by the container of 100vh, therefore the overflow property of the .box is not triggered and the content is cut short.

Edit: If I wasn't clear before, the problem is that the .box and the #right elements do not respect the max-height attribute of the parent #container which is causing the scroll issues.

Upvotes: 2

Views: 738

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371113

The problem isn't really the max-height. It's the top and bottom margins on your .box element (margin: 8px). When added to the max-height: 100vh, it results in an overflow of the wrong container. If you remove those margins, and add box-sizing: border-box (to factor in borders and padding), your page and the overflow work as intended.

body {
  margin: 0;
  background-color: #222525;
  color: white;
}

#container {
  display: grid;
  grid-template-columns: 27fr 78fr;
}

#left {
  grid-row: 1;
  grid-column: 1
}

#right {
  grid-row: 1;
  grid-column: 2;
}

.box {
  /* margin: 8px; */
  padding: 8px;
  border-radius: 10px;
  border: aqua solid 5px;
  max-height: 100vh;
  overflow: auto;
}

li {
  margin: 10px;
}

* { box-sizing: border-box; }
<div id="container">
  <div id="left">
    <div class="box">Navigation sidebar stuff here</div>
  </div>
  <div id="right">
    <div class="box">
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
      </ul>
    </div>
  </div>
</div>

As a solution, try padding: 8px on the parent elements (#right and #left) instead.

Upvotes: 2

Related Questions