Как зафиксировать один элемент внутри другого?

Question

[Илья]

html:

<div class="jumbotron">
    <h1>Большой и страшный заголовок</h1>
</div>

css:

.jumbotron h1 {
    padding-bottom: 20%;
}

Хочу чтобы заголовок отображался в нижней части родительского элемента. На большом окне все работает, но при уменьшении окна до некоторых размеров (не доходя до бутстраповского брейкпоинта) заголовок начинает выезжать вниз под родительский элемент. После брейкпоинта размер шрифта уменьшается и все ОК.

Собственно как сделать, чтобы заголовок всегда отображался в нижней части .jumbotron и не покидал его при уменьшении окна?

Answer 1

[Егор Живагин]

.jumbotron {
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
}