Растянуть высоту absolute элемента на 100% родителя

Question

Делаю сетку которая должна всегда занимать 100 % родителя. Спозиционировал абсолютом, но это работает до тех пор пока контент не выходит за пределы окна, если появляется скролл, то сетка не достает до нижнего края. Могу конечно js-ом нужную высоту ставить, но это крайний уже случай, должен думаю быть способ пофиксить это css. Перебрал вроде все варианты с height, min-height, растягивал flex-ом все равно не 100% родителя не получается растянуть.

Вот ссылка на пример, речь идет о вертикальных красных линиях.

https://stackblitz.com/edit/angular-ivy-35b42b?file=src/app/core/core.component.css

Answer 1

так работает как вы хотите

.wrap{
  position: absolute;
  min-height: 100vh
}

<div class="header">Header Core</div>
<div class="wrapper">
  <div class="wrap">
    <div class="grids">
      <div class="grid" *ngFor="let item of intervals">{{ item }}</div>
    </div>
    <ul class="list">
      <!-- <li *ngFor="let row of dataShort; let i = index"> -->
      <li *ngFor="let row of dataLong; let i = index">
        <div class="menu">
          <div class="name">{{ row.name }}</div>
        </div>
      </li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Растянуть высоту absolute элемента на 100% родителя

Ответы (1 шт):