You shouldn't have flex-grow
and flex-shrink
on anything except for flex-grow
on the .editor
.
This way the fixed heights of footer and header wouldn't change, the height of the .attachments
would be equal to its content but not bigger than its max-height
, and the .editor
would fill all other space.
- Here is an example without content at attachements — http://jsfiddle.net/kizu/r9b8E/ — it have the desired
0
height. - Here is it with one line of text: http://jsfiddle.net/kizu/z2Fj6/
- Here is it with 10 lines — http://jsfiddle.net/kizu/McZTV/
Updated: and if you'd need to have some min-height at .editor
, you can just set it, but if you'd like other blocks not to shrink when the body becomes smaller, you should give everyone flex-shrink: 0
— http://jsfiddle.net/kizu/X7L8S/ (resize the result pane to see how it behaves)