设置溢出：在带有display：flex的表上滚动 [英] Setting overflow: scroll on a table with display: flex

问题描述

我有一个包含 display：flex 属性的表格，其单元格将垂直居中。当有比表更多的单元格可以显示， overflow：scroll 属性不考虑最高的。

在下面的示例代码中，滚动停止在字母K，当它应该一直到字母A.导致这是什么？

  #container {height：180px;显示：flex; flex-flow：row; alignment-items：stretch; border：1px broken gray;} table {display：flex; flex-flow：row; align-items：center; margin：10px; overflow：scroll; border：1px dotted blue;} td {height：10px; width：100px; border：1px solid red;}＃container div {flex：1; margin：10px; border：1px broken 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>  

解决方案

根据 表父

现在我们有一个< table> 这是一个具有单个flex行的flex容器，它包含一个flex项目（匿名表）。

弹性线的高度将是弹性容器的高度（ spec ）：

如果flex容器单行，并且有一个明确的交叉
大小，flex线的交叉大小是flex容器的内部
交叉大小。

然后使用 align-items：center 。这将垂直对齐在flex线的中间的匿名表（以及< tbody> ），即使它溢出上方或下方。

问题是，滚动条允许滚动查看溢出下面的内容，但不是溢出的内容。

因此，我建议 align-items：center / TR / css-flexbox-1 /＃auto-marginsrel =nofollow noreferrer>与汽车边距对齐：

通过 对齐之前-content 和 align-self ，
任何正的可用空间分配到
维度中的汽车边距。

注意区别：自动边距只分配正的可用空间，而不是负数。

$ b b

因此，我们只需要用

来设置flex项目的样式：

  margin：auto 0 ; / *推到中心（垂直）* / 
  

但是有一个问题： flex项是一个匿名生成的元素，所以我们不能用CSS选择器来选择它。

为了解决这个问题，我们可以添加 display：块添加到< tbody> 。然后，它不会被任何匿名表元素包装，因此它将是一个flex项目，并且对齐方式将工作。

请注意，这不会破坏表，因为< tr> s， table-row s将生成一个匿名的表父项，但现在在< tbody> ：

所以你可以使用这个代码：

  tbody {
 display：block; / *禁用表格布局，并使< tbody> flex项* / 
 margin：auto 0; / *推到中心（垂直）* / 
} 
  

  #container {height：180px;显示：flex; flex-flow：row; align-items：stretch; border：1px broken gray;} table {display：flex; flex-flow：row; margin：10px; overflow：scroll; border：1px dotted blue;} tbody {display：block; / *禁用表格布局，并使< tbody>弹性项目* / margin：auto 0; / *推到中心（垂直）* /} td {height：10px; width：100px; border：1px solid red;}＃container div {flex：1; margin：10px; border：1px broken 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>  

I have a table with the display: flex property, whose cells will be centered vertically. When there are more cells than the table can show, the overflow: scroll property doesn't take the top ones into account.

In the sample code below, the scroll stops at the letter K when it should go all the way up to the letter A. What is causing this?

#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>

解决方案

According to the HTML spec, browsers must wrap the <tr> elements inside a <tbody> element if there isn't any:

The height of that <tbody> will be the height of all rows. However, the height of the <table> can be smaller. That wouldn't be a problem in a table layout, because the height of the table would be treated as a minimum height.

However, the <table> now participates in a flex layout, not a table layout. Since the <tbody> is a table-row-group element whose parent is neither a table nor inline-table (it's a flex), an anonymous table parent is generated.

So now we have a <table> which is a flex container with a single flex line, and which contains a single flex item (the anonymous table).

The height of the flex line will be the height of the flex container (spec):

If the flex container is single-line and has a definite cross size, the cross size of the flex line is the flex container’s inner cross size.

And then you use align-items: center. That will align vertically the anonymous table (together with the <tbody>) at the middle of the flex line, even if it overflows above or below.

The problem is that scrollbars allow scrolling to see the content that overflows below, but not the content that overflows above.

Therefore, instead of align-items: center, I suggest aligning with auto margins:

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

Note the difference: auto margins only distribute positive free space, not negative one.

Therefore, we only have to style the flex item with

margin: auto 0; /* Push to the center (vertically) */

But there is a problem: as explained above, the flex item is an anonymous generated element, so we can't select it with CSS selectors.

To solve that, we can add display: block to the <tbody>. Then, it won't be wrapped in any anonymous table element, so it will be a flex item and the alignment will work.

Note this won't break the table, because the bunch of <tr>s, which are table-rows, will generate an anonymous table parent, but now inside the <tbody>:

So you can use this code:

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>

这篇关于设置溢出：在带有display：flex的表上滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！