带有桌子的flexbox

Question

我有一个基于flexbox的布局,我希望看起来像这样:

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

随着表格数据占据横幅之后可用的任何大小.

如果B是display: block,这可以工作,但如果是的话display: table(请参阅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>

我还尝试将表包装在block容器内无济于事.

有没有办法用我目前的表来完成这个？或者我是否需要使用其他结构？

Answer 1

我设法通过将属性包装table到div包装器中来做到这一点flex: 1。然后我安排height: 100%了一张桌子。在这种情况下，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>

款式：

.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%;
}

这是我的小提琴：http ://jsfiddle.net/ischenkodv/E4Qbw/58/