Как сделать заполнение промежного блока на максимальную высоту?

Question

[Владимир Кузнецов]

Как сделать чтобы данный блок

мог растягиваться на максимально возможную высоту? (сейчас стоит height="70%")
И важное замечание: чтобы не превышало высоту родительского блока, и не "выбивало" нижестоящий блок под этим
(чтобы не было прокрутки).

Вот остальные данные:

Comments

[Ankhena]

calc(100% - 280px)
И у родителя должна быть указана высота, чтобы было от чего считать %

[Владимир Кузнецов]

Ankhena, "calc(100% - 280px)" писать в значении height="..." ?

[Ankhena]

Владимир Кузнецов, да
Либо гридами и 1fr
Но вначале нужно определиться у кого будет прокрутка при переполнении.

Answer 1

[Владимир Кузнецов]

Помог ответ пользователя на ресурсе ru.stackoverflow.com
*Сам вопрос*

<div class="past_body">
  <div class="h">header</div>
  <div class="fg-1">content</div>
  <div class="h">footer</div>
</div>

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

.past_body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.h{
  height: 50px;
}

.fg-1 {
  flex-grow: 1;
}

Comments

[Ankhena]

Так проще гридами.
Только при переполнении будет не то, что вы хотели.