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

Question

我对使用flexbox CSS的div上的滚动条有疑问。

我添加了一个例子来澄清情况。

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

你可以在笔中看到它。 CodePen

参考：类似的情况，但另一种方式是行中的flex-direction：Scrolling a flexbox with overflowing content

对此的任何意见都是值得注意的。

Answer 1

试试这个：

• 删除body元素

  上的默认边距

  body { margin: 0; }
  

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

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

  高度计算为:(视口高度 - 20px填充 - 6px边框）

Revised Codepen