Блок по высоте оставшейся области?

Question

[Vadim Stepanenko]

Всем привет. Подскажите, пожалуйста, на сайте имеется шапка, далее слева идет сайдбар, справа - главный контейнер.
В сайдбаре первым блоком идет мини-профиль, ниже чат. Как сделать так, чтобы чат был по высоте равным оставшейся части страницы?

Answer 1

[Антон Спирин]

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

.profile {
  // your stuff
}

.chat {
  flex: 1 0 auto;
}

Демо 1
Демо 2

Comments

[ink]

а если поставить min-height для .wrapper как вся разметка ломается ....

[Амир Алимжанов]

ink, смотрел сейчас с телефона, ничего не развалилось

[ink]

Амир Алимжанов, я не про это ... я имею ввиду высота же там фиксированная ... а если убрать высоту ?

[Антон Спирин]

ink, вы что-то явно перепутали. В примере не было никакой разметки. На всякий случай сделал новый с разметкой, в двух вариантах. Решение то же самое.