html - 在 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% 视口(viewport)高度，减少边框和填充

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

  高度计算为:(视口(viewport)高度 - 20px 内边距 - 6px 边框)

Revised Codepen