设置溢出:使用display:flex在桌面上滚动

Question

我有一个display: flex属性表,其单元格将垂直居中.如果有多个单元格而不是表格可以显示,则该overflow: scroll属性不考虑顶部单元格.

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

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

Answer 1

根据HTML规范,如果没有任何<tr>内容,浏览器必须将元素包装在元素中<tbody>:

它的高度<tbody>将是所有行的高度.但是,高度<table>可以更小.这在表格布局中不是问题,因为表格的高度将被视为最小高度.

但是,<table>现在参与flex布局,而不是表格布局.由于<tbody>是一个table-row-group元素的父是既不是table也不inline-table(这是一个flex),一个匿名 table产生母体.

所以现在我们有一个<table>带有单个弹性线的弹性容器,它包含一个弹性项(匿名table).

柔性线的高度将是flex容器的高度(spec):

如果柔性容器是单线并且具有确定的交叉尺寸,则柔性线的交叉尺寸是柔性容器的内部交叉尺寸.

然后你用align-items: center.这将在弹性线的中间垂直对齐匿名table(连同<tbody>),即使它在上方或下方溢出.

问题是滚动条允许滚动查看下面溢出的内容,但不能看到溢出的内容.

因此,align-items: center我建议与自动边距对齐,而不是:

在通过justify-content和进行对齐之前align-self,任何正的自由空间都会分配到该维度中的自动边距.

注意区别:自动边距仅分配正空闲空间,而不是负空间.

因此,我们只需要为flex项设置样式

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

但是有一个问题:如上所述,flex项是一个匿名生成的元素,所以我们不能用CSS选择器选择它.

要解决这个问题,我们可以添加display: block到<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>