Grid is not occupying full height of its div when used inside flex box

Question

I have a grid (.genTempGrid) inside a column flexbox (which, in turn, is also inside column flexbox). Strangely, the created grid is not occupying full height of its div, instead, its height is limited to its content.

My understanding is, no matter what, height of grid == height of the div on which its sitting. Pls correct me if I am wrong.

.d-flex-column-last-child-flex-grow-1 {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      /*height: 100%;*/
    }
    
.child-expand {
      flex-grow: 1;
    }

.genTempGrid {
            display: grid;
            height: 100%;
            grid-template-columns: 20% 60% 20%;
            grid-template-rows: 1fr;
            background-color: #f7f7f7;
        }
        
.border1 {
      border: 1px solid red;
    }

<div class="d-flex-column-last-child-flex-grow-1" style="height: 50vh">
  <div class=" d-flex-column-last-child-flex-grow-1 child-expand">
    <div class="pl-3 genTempGrid pt-2 child-expand border1">
      <div class="border1">hi</div>
      <div>hi</div>
      <div>hi</div>
    </div>
  </div>
</div>

Edit: I am not looking for workarounds. I am more interested to know the reason behind the current behavior.

can you clarify me. do u want to make the div with the class name .border1 to fill the whole height of its parent div? — Viira, Oct 17 '18 at 09:34
Yes. There are two div `.border1` (one on grid's div and another on grid item), both should have same height. — dasfdsa, Oct 17 '18 at 09:36
there's a way but it will break the grid display! are you okay with it? — Viira, Oct 17 '18 at 09:38

score 1 · Answer 1 · answered Oct 17 '18 at 09:39

1

You can simply put height: -webkit-fill-available css styling. Hope this helps. Thanks.

.d-flex-column-last-child-flex-grow-1 {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  /*height: 100%;*/
}

.child-expand {
  flex-grow: 1;
}

.genTempGrid {
  display: grid;
  height: 100%;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 1fr;
  background-color: #f7f7f7;
}

.border1 {
  border: 1px solid red;
}

.child-expand > .border1 >div {
  height: -webkit-fill-available;
  border: 2px solid green;
  margin: 1px;
}

<div class="d-flex-column-last-child-flex-grow-1" style="height: 50vh">
  <div class=" d-flex-column-last-child-flex-grow-1 child-expand">
    <div class="pl-3 genTempGrid pt-2 child-expand border1">
      <div class="border1">hi</div>
      <div>hi</div>
      <div>hi</div>
    </div>
  </div>
</div>

answered Oct 17 '18 at 09:39

Raymond Natio

556
3
22

Well it because you didn't set the align-content to stretch on the child div. You can see full explanation of grid align-content css value here: https://css-tricks.com/snippets/css/complete-guide-grid/#article-header-id-22 – Raymond Natio Oct 17 '18 at 10:04
`align-content : stretch;` doesnt solve the problem. https://jsfiddle.net/dilp41195/4g7381se/3/ – dasfdsa Oct 17 '18 at 10:21
If you read the article i sent you carefully you would understand. But here is another updated fiddle to help you understand better. https://jsfiddle.net/4g7381se/5/ – Raymond Natio Oct 17 '18 at 10:32
`-webkit-fill-available` causes a lot of overflow problems. As an example see this: https://jsfiddle.net/dilp41195/tk4xe0hj/1/ . Also your your updated filddle changes the problem itself. You remove the height on the first div. – dasfdsa Oct 17 '18 at 10:54
I can see you still need a lot of brushing up in css. The updated fiddle already using the proper method of grid template and the height 100% wouldn't apply with the grid at all, that's why i commented it. Here is another updated fiddle to probably helps you better: https://jsfiddle.net/4g7381se/7/ And for your statement '-webkit-fill-available causes a lot of overflow problems' I don't see it that way and didn't find any article about that flaws. And in your fiddle what cause it to overflow is because of your display flex without specifying the height. https://jsfiddle.net/tk4xe0hj/5/ – Raymond Natio Oct 17 '18 at 11:12

score 1 · Accepted Answer · answered Oct 17 '18 at 11:16

This is due to the this line

.d-flex-column-last-child-flex-grow-1 {
      flex-grow: 1;
    }

For a full explanation see: Why don't flex items shrink past content size? and Fitting child into parent

This can be fixed by using the shorthand flex:1 instead or applying a min-(dimension): 0 which forces a recalculation overall.

.d-flex-column-last-child-flex-grow-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.child-expand {
  flex-grow: 1;
}

.genTempGrid {
  display: grid;
  height: 100%;
  grid-template-columns: 20% 60% 20%;
  grid-template-rows: 1fr;
  background-color: #f7f7f7;
}

.border1 {
  border: 1px solid red;
}

<div class="d-flex-column-last-child-flex-grow-1" style="height: 50vh">
  <div class=" d-flex-column-last-child-flex-grow-1 child-expand">
    <div class="pl-3 genTempGrid pt-2 child-expand border1">
      <div class="border1">hi</div>
      <div>hi</div>
      <div>hi</div>
    </div>
  </div>
</div>

Grid is not occupying full height of its div when used inside flex box

2 Answers2