Как в css расшиперить div вниз до упора?

Question

[Максим Васильев]

Можно ли оттянуть нижнюю границу div до нижней границы родителя, без использования position: absolute и вычисления попиксельных позиций.

Например, вот тут: plnkr.co/VR1WBnvVrOlUWZbH1fhO
чтобы .panel-body растягивался на всю панель, но не наезжал на .panel-heading, который может оказаться всяким по высоте.

Внутри .panel-body предполагается контент, который будет скроллиться, либо контент с width|height: 100%;

P.S.
На старые и несвежие браузеры совершенно пофиг.

Answer 1

[Everlier]

display: flex в помощь :)
Более подробно

Comments

[Максим Васильев]

всёравно не вижу, как сделать "stretch" вдоль оси для отдельного элемента.

Answer 2

[teotlu]

Если пофиг на старые браузеры, то flexbox.

Answer 3

[Максим Васильев]

конкретно для бутстраповских панелек достаточно дописать:

.panel {
  display: flex; 
  flex-direction: column; 
}

.panel-body {
  flex-grow: 1;
}