I think the problem is that the table box is placed inside a table wrapper box:
the table generates a principal block box called the table wrapper box that contains the table box itself and any caption boxes
So the table box is no longer a child of the flex container, and thus is not a flex item. The flex item is the table wrapper box, but you set the flex property to the table element, and
values of non-inheritable properties are used on the table box and not
the table wrapper box
So your flex is used on a box which is not a flex item and thus is ignored.
It might have worked if that property was used on the table wrapper box, but it's not possible to select it. Even if you could, it wouldn't be clear whether it should be sized according to the tabular layout it generates instead of by the the Flexbox layout in which it participates.
The solution is simple:
- Place the table in a wrapper, which will be the flex item
- Size that flex item as desired using flex layout
- Take the table out of flow and give it definite lengths relative to the flex item
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
h1, small {
flex: 0 1 auto;
}
div {
position: relative;
flex: 1 1 0; /* Chrome needs non-auto flex-basis */
overflow: auto;
}
table {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
table-layout: fixed;
border-collapse: collapse;
}
td {
border: 1px dotted;
text-align: center;
}
<h1>Some Header</h1>
<div>
<table><tr>
<td>This</td>
<td>is</td>
<td>equidistributed.</td>
</tr><tr>
<td>This</td>
<td>is also</td>
<td>equidistributed.</td>
</tr></table>
</div>
<small>Some Footer</small>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
