flexbox with a table child

Question

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

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

With the tabular data taking up whatever size is available after the banner.

This works if B is display: block, but not if it's 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've also experimented with wrapping the table inside a block container to no avail.

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

Answer 1

This problem puzzled me for a while too: "How do you make things behave rationally again inside Flexbox?".

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/. May be that helps.

I also think this is a major problem with Flexboxes. May someone with deeper expertise can help us out here.

BTW: I could not get this to work using THEAD, so the Fiddle now has a TBODY instead.

Answer 2

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

<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>

The 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/