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

Question

[minaev007]

https://jsfiddle.net/7jL2zk8b/

Comments

[Ankhena]

align-self не выйдет, извините, не досмотрела ваш код.
либо позиционированием, либо дополнительным блоком

Answer 1

[Павел Грузных]

.pink {
position: absolute;
bottom: 0px;
}

Comments

[minaev007]

хотел так чтоб не вырывать из потока
но все равно спасибо

Answer 2

[Сергей Попов]

Вообще, гугл решает такие проблемы. Раз, два.

Answer 3

[Сергей Герасимов]

Применяем flex'ы и устанавливаем body минимальную высоту в 100% от высоты экрана, а для розового блока заполнение всего оставшегося пространства (или другому, основному, элементу)

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

.pink {
    flex: 1 0 auto;
  }