Как получить резиновый блок посередине?

Question

[hjk]

Заготовка для примера
jsfiddle

Хочется получить средний блок, который занимает всё оставшееся место между первым и вторым при условии, что размер родителя фиксированный. Свойство
height: 100%заставляет нижний блок выпадать из контекста — как быть?

UPD:
Если добавить родителю

display: flex
flex-direction: column

а среднему блоку
flex: 1то, вроде, проблема решается, но тогда у меня ещё два вопроса:
- почему это заработало?
- это похоже на какой-то хак, так ли это или всё ок?
jsfiddle

Comments

[Евгений Петров]

display: flex — какой же это хак? Это — относительно новое дополнение box model.

[hjk]

@Petroveg это да! Но я про то, что flex: 1 выставлен только у среднего блока, хотя display: flex для всего контейнера. Получается, так делать вполне ок? Что этот flex: 1 такого делает со средним блоком?

Answer 1

[Андрей Голуменов]

jsfiddle.net/88covhw0/2
Можно использовать display: table; и display; table-row;

Comments

[hjk]

@Golumenov да, table-row — это здорово. Спасибо.

Answer 2

[sergealmazov]

jsfiddle.net/d59LqL7k

Comments

[hjk]

@sergealmazov да, это работает, а что если у меня высота верхнего и нижнего блоков зависит от контента в них?

Answer 3

[Родион Мещеряков]

Flexbox тоже можно применить, если кроссбраузерность устраивает.

Подробнее о свойстве flex можно прочитать здесь. Там же рядом и про остальные свойства flexbox.

Comments

[hjk]

@rodionme благодарю за ссылки. Подробно и доступно.