Prevent CSS grid child from expanding parent

Question

I have the following css

html,body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.one {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
}

.five {
  background: orange;
  height: 800px;
  overflow-y: auto;
}

.four {
  background: green;
}

.size {
  background: blue;
}

<div class="one">
  <div class="two">
  </div>
  <div class="three">
    <div class="four"></div>
    <div class="five"></div>
    <div class="six"></div>
  </div>
</div>

Now as you can see from https://codepen.io/dubcanada/pen/ZEbYBex the side bar if five is taller then three - 122px (64 + 58px) it expands the height of three to accommodate. I want it to add a scroll bar and not expand the height.

I've tried the min-height: 0;, max-height: 0; min-width: 0; max-width: 0; tricks and everything I can think of I am not sure how to get this fixed.

Any ideas?

set a fixed height and or width to the parent and then add overflow:auto. — jgetner, Apr 10 '20 at 17:46
@jgetner I am not sure I follow what you are saying? Add a fixed height or width to three and then overflow auto? — Steven, Apr 10 '20 at 17:50

score 1 · Answer 1 · answered Apr 10 '20 at 19:55

You will need an extra wrapper for this:

html,body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.one {
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
  min-height:0; /* added this too */
}

.five {
  background: orange;
  overflow-y: auto;
}
.five >div {
  height: 800px;
}

.four {
  background: green;
}

.size {
  background: blue;
}

<div class="one">
  <div class="two">
  </div>
  <div class="three">
    <div class="four"></div>
    <div class="five"><div></div></div>
    <div class="six"></div>
  </div>
</div>

score 0 · Answer 2 · answered Apr 10 '20 at 18:30

Not sure what you want to achieve ...

This is my best guess:

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

.one {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20%;
  grid-template-rows: minmax(0, 1fr);
}

.two {
  background: red;
}

.three {
  background: blue;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr) 58px;
  max-height: 100%;
}

.five {
  background: orange;
  height: 500px;
  overflow-y: auto;
  max-height: 100%;
}

.four {
  background: green;
}

.size {
  background: blue;
}

<div class="one">
  <div class="two">2
  </div>
  <div class="three">
    <div class="four">4</div>
    <div class="five">5</div>
    <div class="six">6</div>
  </div>
</div>

Michael Benjamin · Answer 3 · 2020-04-10T21:36:52.580

You're missing something important in your code. Here's what you have:

.five {
  background: orange;
  height: 800px;
  overflow-y: auto;
}

<div class="three">
   <div class="four"></div>
   <div class="five"></div>
   <div class="six"></div>
</div>

The overflow property defines the behavior of an element when its content is too big to fit.

Therefore, your current set-up won't work because .five contains no content, and overflow never goes into effect. Apply the height: 800px to the content of .five.

Also, keep in mind that, by default, grid items cannot be smaller than their content. That's why you have the scrollbar on the higher level container. You can override this default with min-height: 0 on .three, which is a grid item in .one.

Prevent CSS grid child from expanding parent

3 Answers3