Предотвращение переполнения дочерних элементов max-height родителя

Question

Я пытаюсь создать макет, где у меня есть div с процентной высотой тела. Кроме того, я также хочу ограничить эту высоту, используя max-height.

Внутри родителя я хочу создать несколько столбцов с дополнительными подэлементами, все из которых соответствуют высоте (или максимальной высоте) родителя.

Пожалуйста, смотрите этот пример: http://jsfiddle.net/k6rfr/2/

Проблема заключается в том, что дочерние элементы (с высотой 50% каждый), соответствует height родителя и не max-height.

Есть ли способ сделать дочерние элементы соответствующими max-height вместо height?

Answer 1

Я думаю, что ошибка заключается в том, что данный «внешний» высота блока 60% может не соответствовать тому, что вы написали после 300px. Это неправильно. Если вы удалите заданный процент высоты, блоки упадут на свои места. Или введите правильную высоту пропорций и максимальную высоту.

Answer 2

Хотя это не совсем то, что вам может понадобиться, он решает вашу проблему:

http://jsfiddle.net/k6rfr/3/

Я разместившего макс высоты directy в дочерних-элементов Omiting второй элемент обертку. Проблема в том, что вы должны определить высоту в двух разных местах.