向溢出容器中的表添加行:自动增加容器的高度

Question

我有一个div，里面有一个表。div设置为overflow：auto。行可以动态添加到表中。div是具有flex direction:column的父级中的一个flex项，它被设置为占据80%的高度。

<div class="tableWrapper">
<table id="second" cellspacing="0">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
</div>

.tableWrapper{
flex-basis:80%; /* This is the height */
overflow-y:auto;
display:flex;
width:100%;
}
table{
width:100%;
}
th{
text-align:center;
font-weight:bold;
}
th, td{
height:3em;
vertical-align:middle;
text-align:center;
font-weight:bold;
}

该表以空开始，并添加数据。当行数超过容器的高度/弹性基准时，容器会溢出滚动条并增加高度。我通常一次添加5或6行。

这是在火狐&歌剧iPad操作系统上的Safari可以按预期进行处理。

Answer 1

哎呀，忘记了完全有意义的规则。

应用溢出：隐藏在页面的父元素上当然修复了flexbox的溢出问题。