Flexbox with table child

Question

I have a flexbox based layout that I want to look like this:

_______________ | top banner | |---------------| | tabular data | | | |_______________| 

With tabular data covering any size is available after the banner.

This works if B is display: block , but not if it is display: table (see http://jsfiddle.net/E4Qbw/ ).

 .container { display: -webkit-flex; -webkit-flex-flow: column nowrap; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px dashed #fc0; } .A { -webkit-flex: 0 1 auto; width: 100%; border: 1px solid red; } .B { width: 100%; -webkit-flex: 1 0 auto; border: 1px solid blue; } <div class="container"> <div class="A"> A </div> <table class="B"> <thead> <tr><th>B</th></tr> </thead> </table> </div> 

I also experimented with wrapping a table inside a block container to no avail.

Is there a way to do this with my current table? Or do I need to use some other structure?

Answer 1

I managed to do this by wrapping table in a wrapper div using the flex: 1 property. Then I set height: 100% for the table. In this case, the tbody tag is tbody .

 <div class="container"> <div class="A"> A </div> <div class="B-wrapper"> <table class="B"> <thead> <tr><th>Header</th></tr> </thead> <tbody> <tr><td>Row</td></tr> <tr><td>Row</td></tr> </tbody> </table> </div> </div> 

Styles:

 .container { display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 1px dashed #fc0; } .A { border: 1px solid red; } .B-wrapper { flex: 1; overflow-y: auto; border: 1px solid blue; } .B { width: 100%; height: 100%; } 

Here is my fiddle: http://jsfiddle.net/ischenkodv/E4Qbw/58/

Answer 2

This problem also puzzled me: "How are you behaving rationally again inside Flexbox again?"

My solution is to use

 "position: absolute; top:0; bottom:0; left:0; right:0;" 

Here is my updated fiddle: http://jsfiddle.net/E4Qbw/10/ . Maybe this helps.

I also think this is a serious problem with Flexboxes. Let someone with deeper experience can help us here.

BTW: I couldn't get this to work using THEAD, so Fiddle now has TBODY.