在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

參考：類似的情況，但以另一種方式彎曲方向行：Scrolling a flexbox with overflowing content

任何對此的投入將是明顯的。

Answer 1

試試這個：

• 的body元素上刪除默認保證金

  body { margin: 0; } 
  

• 設置滾動條格到100％的視口的高度，少邊框和貼

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

  高度計算是：（視口高度 - 20px填充 - 6像素邊框）

Revised Codepen