css - 如何滚动 flex-grow-1 的 flex 行的内容

Question

我有一个带有 bootstrap 的布局，其中有 3 行包裹在 flex col 中，如下所示:

<div class="row" style="height:100vh;">
  <div class="col d-flex flex-column">
    <div class="row">...</div>
      <div class="row flex-grow-1">
        <table>
          ...many rows...
        </table>
      </div>
    <div class="row">...</div>
  </div>
</div>

flex col 中的第一行将在上，第二行将使用之间的所有空间，第三行将在底部。在第二行，我想放一个有很多行的表格，并将表格包含在里面，做成一个“窗口”之类的东西来查看表格的内容，滚动表格。

但是，第二个 div 随表格内容增长，我尝试将表格包裹在一个 div 中并将 max-height 设置为 100%，但 flex 行总是因表格内容而增长。

¿如何使 flex 行在其表内滚动，但占用其父级固定高度的最大可用空间？

Answer 1

它应该像这样使用 max-height 和 overflow-auto...

   <div class="row">
        <div class="col d-flex flex-column vh-100" style="max-height: 100vh">
            <div class="row">
                top row
            </div>
            <div class="row flex-grow-1 overflow-auto">
                <div class="col">
                    <table>
                        <tbody>
                            <tr>
                                <td>table row</td>
                            </tr>
                            ..
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="row">bottom row</div>
        </div>
   </div>

https://www.codeply.com/go/v6AH817CoZ

相关:Bootstrap 4: Scrollable row, which fills remaining height