html - flexbox 中的垂直滚动表

Question

我试图在 flexbox 中制作可滚动的 tbody。

我有两个 flexbox，每个 flexbox 里面都有表格。

当表中的元素溢出时，我想在 tbody 中使用垂直滚动条。

但是表格在没有固定高度的 flexbox 中。

我应该怎么做才能在 tbody 中显示垂直滚动条？

.root {
  background-color:green;
  width: 200px;
  height: 200px;
  display: flex;
  flex-flow:column nowrap;
}

.container1 {
  display: flex;
  flex-grow:4;
  background-color:yellow;
}

.container1 tbody {
  overflow: auto;
}

.container2 {
  display: flex;
  flex-grow:3;
  background-color:blue;
}

<div class="root">
  <div class="container1">
    <table>
      <thead>
        <tr>
          <td>name</td>
          <td>age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="container2">
      <table>
      <thead>
        <tr>
          <td>name</td>
          <td>age</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
        <tr>
          <td>jhon</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

如果您需要更多信息，请告诉我。谢谢。

Answer 1

你应该使用自动溢出

CSS

.container1 {
  display: flex;
  flex-grow:4;
  background-color:yellow;
  overflow:auto;
}