具有自己的滚动条的列占用 100vh 容器的 100% 可用空间

Question

我试图让 3 列有自己的滚动条，但占用 100% 的可用空间。 但是没有滚动条，或者他们没有获得 100% 的可用空间。 重要的是主体不能有滚动（这就是容器 100vh 的原因）。

我知道如何使用 Javascript 做到这一点，但我确信有一种方法可以在 CSS 中做到这一点。

<div class="container-xxl flex-grow-1" style="height: 100vh;">
  <div class="row h-100">
    <div class="col-2" id="left">
      side bar menu
    </div>
    <div class="col-12 col-md-10 h-100 d-flex flex-column" id="right">
      <div class="row">
        <div class="col-12">
           Header with some stuff ...
          <p>some stuff of the header</p>
      </div>
      <div class="row h-100" id="threecolumns" style="background-color:#fee">
        <div class="col-4 h-100 overflow-auto" style="background-color:#f2e">
          column with its own scroll
          <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        </div>
        <div class="col-4 h-100 overflow-auto" style="background-color:#d3e">
          column with its own scroll
          <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        </div>
        <div class="col-4 h-100 overflow-auto" style="background-color:#e4e">
          column with its own scroll
          <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        </div>
      </div>
    </div>
  </div>
</div>

类似这样的：

在这里：https://codepen.io/cptacco/pen/OJrPdEg

Answer 1

将

100vh

添加到每一列，并将

overflow:hidden;

添加到

container-xxl