Как сделать так, что бы блок был максимум 50 процентов от родителя?

Question

[js_web]

Задача:
1) нижняя таблица должна занимать всю область родителя, т.е. некий жадный режим
2) верхняя таблица должна занимать только то место, которое ей предназначено, но если в нее добавлен контент, то таблица не может быть больше 50%

https://jsfiddle.net/0n6to7sh/4/

сейчас работает идеально, но там костыль в виде calc
Подскажите плиз, можно ли как-нибудь сделать без костыля , потому что высота шапки может меняться.

UPD: сделал обертку, но теперь не работает Max-height https://jsfiddle.net/0n6to7sh/11/ :(

Comments

[Svetley]

https://jsfiddle.net/mr_svetley/npuqcsog/

Answer 1

[Svetley]

Попробуй этим двум таблицам задать контейнер. Тогда можно будет обойтись min-height: 50%.

Answer 2

[Алекс]

Вынесите шапку из контейнера или таблицы добавьте в свой контейнер и используйте max-height: 50%;

Comments

[js_web]

https://jsfiddle.net/0n6to7sh/13/
все, заработало, спасибо