Сетка не занимает всю высоту своего деления при использовании внутри гибкой коробки

Question

У меня есть grid (.genTempGrid) внутри столбца flexbox (который, в свою очередь, также находится внутри столбца flexbox).Как ни странно, созданный grid не занимает всю высоту своего div, вместо этого его высота ограничена его содержимым.

Мое понимание, несмотря ни на что, высота grid == высотаДив на котором сидит.Пожалуйста поправьте меня, если я ошибаюсь.

.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>

Редактировать: я не ищу обходных путей.Мне больше интересно узнать причину нынешнего поведения.

Answer 1

Это связано с этой строкой

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

Полное объяснение см. В Почему гибкие элементы не сжимаются до размера содержимого? и Встраивание дочернего элемента в родительский

Это можно исправить, используя вместо этого сокращение flex:1 или применяя min-(dimension): 0, который вызывает общий пересчет.

.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>

Answer 2

Вы можете просто указать height: -webkit-fill-available css styleling.Надеюсь это поможет.Спасибо.

.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>