0

I am trying to see if it is possible to grow the height of a grid to fill the height of a parent container.

What I've tried:

  • I've tried setting 100% height/min-height on the grid container and child divs.

  • 100vh isn't the solution as that will not be dynamic.

I'm a bit stuck on how to do this and if it is possible.

Any help with this is much appreciated. Thanks!

I've created a CodePen to try to figure this out here:

https://codepen.io/fylzero/pen/bGGvBPa

HTML

<div class="flex">
  <div class="grid">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
  </div>
</div>

CSS

html, body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
}

.flex {
  display: flex;
  padding: 10px;

  flex-direction: column;
  flex: 1 1 auto;
  min-height: 100%;
  outline: 1px solid red;
}

.grid {
  display: grid;
  padding: 10px;

  height: 100%; /* THIS DOESN'T DO IT */

  grid-template-columns: 1fr minmax(auto, 400px) minmax(auto, 800px) 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  outline: 1px solid green;
}

.grid div {
  padding: 10px;
  outline: 1px solid blue;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
fylzero
  • 460
  • 6
  • 18
  • 2
    Use `flex:1;`instead `height:100%;`since `.grid` is a flex child. – G-Cyrillus Nov 05 '19 at 18:54
  • @G-Cyr At first glance I thought this approach worked, but it doesn't seem to do what is needed. I updated the codepen. Still doesn't expand to fill the container. – fylzero Nov 05 '19 at 20:10
  • 1
    you need to also add : grid-template-rows: 100%; – Temani Afif Nov 05 '19 at 20:10
  • @TemaniAfif That actually does seem to work now. I made a typo when I tried at first. – fylzero Nov 05 '19 at 20:15
  • @TemaniAfif It would probably be useful to unmark this as duplicate and submit an answer, which I will gladly accept... so other users that run into this can find a solve for this problem. – fylzero Nov 05 '19 at 20:16
  • @TemaniAfif Thanks! – fylzero Nov 05 '19 at 20:16
  • I will find another duplicate of it and you can clearly see that your question is wrongly asked because you want the grid to fill the parent AND the item inside to grow too. In your question you only asked *it is possible to grow the height of a grid to fill the height of a parent container.* which is solved by the first duplicate. – Temani Afif Nov 05 '19 at 20:18
  • @TemaniAfif The grid refers to the grid container and contained elements. The question you marked duplicate does not even contain the word "grid" in the entire question. – fylzero Nov 05 '19 at 20:22
  • because your *grid* is a flex item and the question is more generic and explain how to expand a flex item inside a flexbox container whataver the nature of the flex item is. – Temani Afif Nov 05 '19 at 20:24
  • @TemaniAfif Yes... it is. Which, coming in to this, I did not know or understand... if someone was looking for this answer, they'd likely land on this question, not the other ones... The answer to this question alone being "flex:1;" AND "grid-template-rows: 100%;" should be enough to tell you that these are different questions. The only thing incorrect here is you closing the issue before understanding it and not letting it exist as a separate/clarified question and presenting an answer to it. – fylzero Nov 05 '19 at 20:29

0 Answers0