在 flexbox div 上渲染滚动条而不是浏览器窗口

Question

我有一个关于使用 flexbox CSS 的 div 滚动条的问题。

我添加了一个例子来说明情况。

* {
  box-sizing: border-box;
}
.flex-display {
  display: flex;
  align-items: stretch;
  height: 100%;
}
.tree-container {
  border: 1px groove gray;
  padding: 10px;
  width: 25%;
  height: 100%;
}
.detail-container {
  border: 1px groove black;
  padding: 10px;
  width: 75%;
  height: 100%;
  flex: auto;
}
#ViewContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#Header {
  border: 1px ridge;
  display: block;
}
#Detail {
  border: 1px ridge;
  overflow-y: auto;
}

<div class="flex-display">
  <div class="tree-container">
    HERE COMES A TREE
  </div>
  <div class="detail-container">
    <div id="MainContainer">
      <div id="ViewContainer">
        <div id="Header">
          This is going to be my Header View with Fixed Height of Content.
        </div>
        <div id="Detail">
          <h2> Set scrollbar on this div to utilized remaining height of browser window without showing scrollbar on Browser.</h2>

          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>

          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>

          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>
          <div>
            <p>
              HEre we are going to have some divs or some form and some other things but this part has to be scrollable.
            </p>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

您可以在笔中看到它。 CodePen

参考：类似情况，但以另一种方式 flex-direction in row：Scrolling a flexbox with overflowing content

对此的任何意见都将是可观的。

Answer 1

试试这个：

• 移除body元素的默认边距

  body { margin: 0; }
  

• 将滚动条 div 设置为 100% 视口高度，减少边框和填充

  #ViewContainer {  height: calc(100vh - 26px); }
  

  高度计算为：（视口高度 - 20px padding - 6px 边框）

Revised Codepen