我想在包含两个表的DIV上使用CSS flexBox,并使用flex-grow使其中一个表填充可用空间.但是,它没有增长.似乎这是因为表不是块显示元素.如果我将TABLE包装在DIV中,我可以使用它.但是,我想知道是否有没有额外的DIV可以让它工作？
下面是一个例子 – 第一个容器没有DIVS,第二个容器是DIV并且具有理想的布局.
div.container {
display: flex;
background-color: red;
}
#nodivs table:first-child {
background-color: green;
}
#nodivs table:last-child {
background-color: blue;
flex-grow: 1;
}
#divs div:first-child {
background-color: green;
}
#divs div:last-child {
background-color: blue;
flex-grow: 1;
}
#divs div:last-child table {
width: 100%
}
<div id="nodivs" class="container">
<table>
<thead>
<tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
</thead>
</table>
<table>
<thead>
<tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
</thead>
</table>
</div>
<br><br>
<div id="divs" class="container">
<div><table>
<thead>
<tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
</thead>
</table></div>
<div><table>
<thead>
<tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
</thead>
</table></div>
</div>
解决方法
我花了一段时间,但我认为我得到了它,而不是在这一点上重要的是：D
我在第二个表格中制作了每个元素并添加了flex：1.我做了第一个表flex：0;
Flex-grow：1应该适用于所有flex：1也适用但有点不同,几乎不可察觉.
div.container {
display: flex;
background-color: red;
}
#nodivs table:first-child {
display: flex;
flex: 0;
background-color: orange;
}
#nodivs table:last-child {
display: flex;
flex: 1;
background-color: green;
}
#nodivs table:last-child thead {
display: flex;
flex: 1;
background-color: red;
}
#nodivs table:last-child tr {
display: flex;
flex: 1;
background-color: white;
}
#nodivs table:last-child th {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
background-color: blue;
}
#divs div:first-child {
background-color: green;
}
#divs div:last-child {
background-color: blue;
flex-grow: 1;
}
#divs div:last-child table {
width: 100%
}
<div id="nodivs" class="container">
<table>
<thead>
<tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
</thead>
</table>
<table>
<thead>
<tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
</thead>
</table>
</div>
<br><br>
<div id="divs" class="container">
<div><table>
<thead>
<tr><th>T1C1</th><th>T1C2</th><th>T1C3</th></tr>
</thead>
</table></div>
<div><table>
<thead>
<tr><th>T2C1</th><th>T2C2</th><th>T2C3</th></tr>
</thead>
</table></div>
</div>
