3 див, занимающие всю высоту родителя, первого и последнего сОн переменной высоты

Question

Я пытался реализациями следующей конструкции:

Использования JavaScript, я легко добиться успеха. Я попытался реализовать одно и то же поведение, но без Javascript, используя только CSS, и я потерпел неудачу. Я хотел бы знать, возможно ли это.

Моя текущая реализация основана на дивы, но это может быть любой другой HTML элемент (таблица и т.д.)

<div id="parent"> 
    <div id="one"> 
    Some variable content 
    </div> 
    <div id="two"> 
    Should occupy the remaining height 
    </div> 
    <div id="three"> 
    Some variable content 
    </div> 
</div> 

Вот JSFiddle реализации основы.

Благодарим за помощь.

Answer 1

Приветствия! Да, вы можете использовать flex. Это просто и просто, установите контейнер для отображения: flex, затем вы можете указать, какие из дочерних контейнеров должны расти, а какие нет, с атрибутом flex-grow.

#parent { 
    display: flex; 
    flex-direction: column; 
} 

#one, #three { 
flex-grow: 0; 
} 

#two { 
    flex-grow: 1; 
} 

Смотрите обновленную скрипку: https://jsfiddle.net/ypzd68wv/3/

PS: Проверьте минимальные требования к поддержке браузера;) http://caniuse.com/#feat=flexbox