How can I make the block be a maximum of 50 percent of the parent?

Question

css

Task:
1) the bottom table should occupy the entire area of ​​the parent, i.e. some kind of greedy mode
2) the top table should only occupy the place that it is intended for, but if content is added to it, then the table cannot be more than 50%
https://jsfiddle.net/0n6to7sh/4/
now works perfectly, but there crutch in the form of calc
Please tell me if it's possible to do it somehow without a crutch, because the height of the cap can change.
UPD: made a wrapper, but now Max-height doesn't work https://jsfiddle.net/0n6to7sh/11/ :(

Answer 1

Try to set the container to these two tables. Then you can get by with min-height: 50%.