title: flexbox with a table child
body: <p>I have a flexbox based layout that I want to look like this:</p>
  
  <pre><code> _______________
  | top banner    |
  |---------------|
  | tabular data  |
  |               |
  |_______________| 
  </code></pre>
  
  <p>With the tabular data taking up whatever size is available after the banner.</p>
  
  <p>This works if <code>B</code> is <code>display: block</code>, but not if it's <code>display: table</code> (see <a href="http://jsfiddle.net/E4Qbw/" rel="noreferrer">http://jsfiddle.net/E4Qbw/</a>).</p>
  
  <pre><code>.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;
  }
  
  &lt;div class="container"&gt;
      &lt;div class="A"&gt;
             A
      &lt;/div&gt;
      &lt;table class="B"&gt;   
          &lt;thead&gt;
              &lt;tr&gt;&lt;th&gt;B&lt;/th&gt;&lt;/tr&gt;
          &lt;/thead&gt;     
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also experimented with wrapping the table inside a <code>block</code> container to no avail.</p>
  
  <p>Is there any way to accomplish this with my current table?  Or do I need to use some other structure?</p>