Render scrollbar on flexbox div not browser window

Question

I have a question regarding scroll-bar on div with use of flexbox CSS.

I have added an example to clarify the situation.

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

You can see it in the pen. CodePen

Reference: Similar situation but in another way flex-direction in row: Scrolling a flexbox with overflowing content

Any input on this will be appreciable.

Answer 1

Try this:

• Remove the default margin on the body element

  body { margin: 0; }
  

• Set the scrollbar div to 100% viewport height, less borders and padding

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

  The height calculation is: (viewport height - 20px padding - 6px borders)

Revised Codepen