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

【问题标题】：how to scroll content of flex row that is flex-grow-1如何滚动flex-grow-1的flex行的内容
【发布时间】：2020-01-15 17:51:02
【问题描述】：

我有一个带有引导程序的布局，其中有 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 行在内部滚动其表格，但在固定高度的情况下占用其父级的最大可用空间？

【问题讨论】：

标签： css bootstrap-4 flexbox

【解决方案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

【讨论】：