盒子工作与一个div，但不是一个表？
以下简单的代码片段会导致一个网页占用可用的屏幕空间，顶部有一个标题，底部有一个页脚，主要内容占用尽可能多的空间（虚线边框使其更容易查看）：
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
h1, small {
flex: 0 1 auto;
}
div {
flex: 1 1 auto;
border: 1px dotted;
}<!doctype html>
<html>
<body>
<h1>Some Header</h1>
<div>Some Text</div>
<small>Some Footer</small>
</body>
</html> html table元素在flex容器中保留其display属性：
display: table
因此，它不接受flex属性。
但是，只需使用display: block display: flex覆盖该规则，并且布局应该可以工作。
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
h1,
small {
flex: 0 1 auto;
}
table {
display: flex;
flex: 1 1 auto;
}
tbody {
display: flex;
width: 100%;
}
tr {
display: flex;
width: 100%;
}
td {
flex: 1;
border: 1px solid red;
}<h1>Some Header</h1>
<table>
<tr>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
<td>Some Content</td>
</tr>
</table>
<small>Some Footer</small>我认为问题在于表格框放置在一个表格包装盒中：
该表生成一个称为表格包装盒的主要盒子框，其中包含表盒本身和任何标题框
所以表格盒子不再是弹性容器的子弹，因此不是弹性物品。 Flex项目是表格包装盒，但您将flex属性设置为table元素和
表格框中使用非可继承属性的值，而不是表格包装盒
所以你的flex被用在一个不是flex项目的盒子上，因此被忽略。
如果该属性用在表格包装盒上，它可能已经工作，但无法选择它。 即使可以，也不清楚是否应根据其生成的表格布局而不是其参与的Flexbox布局来确定其大小。
解决方案很简单：
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>一件事，你应该使用vw和vh单位的高度和宽度，它们在大多数浏览器中都不被支持，但他们真的擅长他们能做的事情。 另外，对于表格问题，您从未将其指定为宽度，因此您只会获得适合文本的单元格。
添加“宽度：75vw”等内容 到表格样式将有所帮助（您可以使用％s作为宽度）
链接地址: http://www.djcxy.com/p/37777.html