我有一张桌子display: flex属性，其单元格将垂直居中。当单元格数量超过表格所能显示的数量时，overflow: scrollproperty 不考虑顶级的。
在下面的示例代码中，滚动在字母 K 处停止，而实际上它应该一直滚动到字母 A。是什么原因造成的？
#container {
height: 180px;
display: flex;
flex-flow: row;
align-items: stretch;
border: 1px dashed gray;
}
table {
display: flex;
flex-flow: row;
align-items: center;
margin: 10px;
overflow: scroll;
border: 1px dashed blue;
}
td {
height: 10px;
width: 100px;
border: 1px solid red;
}
#container div {
flex: 1;
margin: 10px;
border: 1px dashed red;
}<div id="container">
<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
<tr><td>F</td></tr>
<tr><td>G</td></tr>
<tr><td>H</td></tr>
<tr><td>I</td></tr>
<tr><td>J</td></tr>
<tr><td>K</td></tr>
<tr><td>L</td></tr>
<tr><td>M</td></tr>
<tr><td>N</td></tr>
<tr><td>O</td></tr>
<tr><td>P</td></tr>
<tr><td>Q</td></tr>
<tr><td>R</td></tr>
<tr><td>S</td></tr>
<tr><td>T</td></tr>
<tr><td>U</td></tr>
<tr><td>V</td></tr>
<tr><td>W</td></tr>
<tr><td>X</td></tr>
<tr><td>Y</td></tr>
<tr><td>Z</td></tr>
</table>
<table>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
</table>
<div></div>
</div>根据HTML 规范，浏览器必须包装<tr>a 内的元素<tbody>元素（如果没有）：
那个的高度<tbody>将是所有行的高度。然而，其高度<table>可以更小。这在表格布局中不会成为问题，因为表格的高度将被视为最小高度。
但是，那<table>现在参与弹性布局，而不是表格布局。自从<tbody> is a table-row-group其父元素既不是 a 的元素table nor inline-table（它是flex), an 匿名的 table父级已生成。
所以现在我们有一个<table>这是一个具有单个 Flex 行的 Flex 容器，并且包含单个 Flex 项目（匿名table).
柔性线的高度将是柔性容器的高度（spec):
如果弹性容器是单线并且有明确的十字 size，柔性线的交叉尺寸是柔性容器的内部尺寸 十字尺寸。
然后你使用align-items: center。这将垂直对齐匿名table（连同<tbody>) 位于柔性线的中间，即使它溢出到上方或下方。
问题是滚动条允许滚动看到下面溢出的内容，但看不到上面溢出的内容。
因此，代替align-items: center， 我建议与自动边距对齐:
对齐之前通过justify-content and align-self, 任何正的可用空间都分配给自动边距，因为 方面。
请注意区别：自动边距仅分配positive自由空间，而不是负空间。
因此，我们只需使用以下方式设置 Flex 项目的样式
margin: auto 0; /* Push to the center (vertically) */
但有一个问题：如上所述，flex 项是匿名生成的元素，因此我们无法使用 CSS 选择器选择它。
为了解决这个问题，我们可以添加display: block to the <tbody>。然后，它不会被任何匿名包裹table元素，因此它将是一个弹性项目并且对齐将起作用。
请注意，这不会破坏桌子，因为一堆<tr>s，分别是table-rows，将生成一个匿名table父级，但现在在<tbody>:
所以你可以使用这段代码：
tbody {
display: block; /* Disable tabular layout, and make <tbody> a flex item */
margin: auto 0; /* Push to the center (vertically) */
}
#container {
height: 180px;
display: flex;
flex-flow: row;
align-items: stretch;
border: 1px dashed gray;
}
table {
display: flex;
flex-flow: row;
margin: 10px;
overflow: scroll;
border: 1px dashed blue;
}
tbody {
display: block; /* Disable tabular layout, and make <tbody> a flex item */
margin: auto 0; /* Push to the center (vertically) */
}
td {
height: 10px;
width: 100px;
border: 1px solid red;
}
#container div {
flex: 1;
margin: 10px;
border: 1px dashed red;
}<div id="container">
<table>
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
<tr><td>F</td></tr>
<tr><td>G</td></tr>
<tr><td>H</td></tr>
<tr><td>I</td></tr>
<tr><td>J</td></tr>
<tr><td>K</td></tr>
<tr><td>L</td></tr>
<tr><td>M</td></tr>
<tr><td>N</td></tr>
<tr><td>O</td></tr>
<tr><td>P</td></tr>
<tr><td>Q</td></tr>
<tr><td>R</td></tr>
<tr><td>S</td></tr>
<tr><td>T</td></tr>
<tr><td>U</td></tr>
<tr><td>V</td></tr>
<tr><td>W</td></tr>
<tr><td>X</td></tr>
<tr><td>Y</td></tr>
<tr><td>Z</td></tr>
</tbody>
</table>
<table>
<tbody>
<tr><td>A</td></tr>
<tr><td>B</td></tr>
<tr><td>C</td></tr>
</tbody>
</table>
<div></div>
</div>