How to allow an element to expand until its container reaches the border (with a flexible layout)?

Question

(after this question and its useful answer)

I am trying to create a container with a header and footer, as well as an area of ​​main content that can increase / decrease as needed. No sizes are known in advance. All of this should be allowed to grow vertically until the container reaches the set limit using max-height .

Ideally, the height of the header and footer never changes; An article grows only as much as it should display its contents, but is limited by the size of its container.

Can this be done only with CSS?

Screenshot

Demo

• Work with a fixed container size: Fiddle
• same as above interactive: fiddle
• broken version using max-height instead of height : Fiddle

HTML

 <div> <header>header 1<br>header 2<br>header 3</header> <article>content 1<br>content 2<br>content 3 ...</article> <footer>footer 1<br>footer 2<br>footer 3</footer> </div> 

CSS

 div { display: flex; flex-flow: column; max-height: 300px; /* this makes the article content disappear */ } article { flex: 2; overflow: auto; background: gold; } 

I tried various values ​​in the flex: property flex: including 0%, 100%, or main size as the base of flex, but could not get the result I'm looking for.

Answer 1

It looks like you are not using flexbox correctly:

http://jsfiddle.net/7RB2h/1/

 div { display: flex; flex-direction: column; /* We set the direction as column */ width: 300px; max-height: 300px; /* The max height you require */ } article { flex-grow: 1; /* Article will then become flex */ overflow: auto; background: gold; } /* (colors, not important) */ div { background: #eee; } header { background: tomato; } article { background: gold; } footer { background: lightgreen; }