添加可滾動的div flexbox Divs

Question

我想添加滾動內我的主頁面佈局有左和右面板。

在右側面板中，我想滾動div，但整個頁面不應該有滾動條。

我也做了以下

body{  
 
    height:100vh; 
 
} 
 

 
.body-container{ 
 
    backgound: yellow; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.left-panel{ 
 
    background:red; 
 
    flex:1; 
 
    margin-right:1px; 
 
} 
 

 
.right-panel{ 
 
    background:green; 
 
    display:flex; 
 
    flex-flow:column; 
 
    flex:3 0 auto; 
 
} 
 

 
.content-container{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex:1; 
 
} 
 
.fixed-header{ 
 
    background:lightGreen; 
 
} 
 
.scrollable-content{ 
 
    flex:1; 
 
    overflow-y:auto; 
 
    background:lightBlue; 
 
}

<div class="body-container"> 
 
    <div class="left-panel"> 
 
     <p> Left Panel </p> 
 
    </div> 
 
    <div class="right-panel"> 
 
     <p> Right Panel </p> 
 
     <div class="content-container"> 
 
      <div class="fixed-header"> 
 
       <p> Fixed header </p> 
 
       <p> Fixed header </p> 
 
       <p> Fixed header </p> 
 
       <p> Fixed header </p> 
 
       <p> Fixed header </p> 
 
       <p> Fixed header </p> 
 
      </div> 
 
      <div class="scrollable-content"> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
       <p> Scrollable </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

任何一個能幫助我嗎？

Answer 1

我已經找到辦法，在這裏我們並不需要設置在兒童的div的高度，使其滾動。

body { 
 
    height: 100vh; 
 
    width: 100vw; 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.body-container { 
 
    flex: 1: background: #fff; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
    display: flex; 
 
} 
 
.left-panel { 
 
    background: red; 
 
    flex: 1 
 
} 
 
.right-panel { 
 
    background: green; 
 
    flex: 3; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content-container { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.fixed-header {} .scrollable-content { 
 
    flex: 1; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
}

<div class="body-container"> 
 
    <div class="left-panel"> 
 
    <p>My Left Panel</p> 
 
    </div> 
 
    <div class="right-panel"> 
 
    <p>Test My Right Panel</p> 
 
    <div class="content-container"> 
 
     <div class="fixed-header"> 
 
     <p>Fixed header</p> 
 
     <p>Fixed header</p> 
 
     <p>Fixed header</p> 
 
     </div> 
 

 
     <div class="scrollable-content"> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     <p>Scrollable</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

試試這個，增加max height和overflow -y來滾動。

body{  
 
    height:100vh; 
 
    } 
 

 
.body-container{ 
 
    backgound: yellow; 
 
    display:flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.left-panel{ 
 
    background:red; 
 
    flex:1; 
 
    margin-right:1px; 
 
} 
 

 
.right-panel{ 
 
    background:green; 
 
    display:flex; 
 
    flex-flow:column; 
 
    flex:3 0 auto; 
 
} 
 

 
.content-container{ 
 
    display:flex; 
 
    flex-direction:column; 
 
    flex:1; 
 
} 
 
.fixed-header{ 
 
    background:lightGreen; 
 
} 
 
.scrollable-content{ 
 
    flex:1; 
 
    overflow-y:scroll; 
 
    max-height:200px; 
 
    background:lightBlue; 
 
}

<div class="body-container"> 
 
<div class="left-panel"> 
 
<p> 
 
Left Panel 
 
</p> 
 
</div> 
 
<div class="right-panel"> 
 
<p> 
 
Right Panel 
 
</p> 
 
<div class="content-container"> 
 
<div class="fixed-header"> 
 
<p> 
 
Fixed header 
 
</p> 
 
<p> 
 
Fixed header 
 
</p> 
 
<p> 
 
Fixed header 
 
</p> 
 
<p> 
 
Fixed header 
 
</p> 
 
<p> 
 
Fixed header 
 
</p> 
 
<p> 
 
Fixed header 
 
</p> 
 
</div> 
 

 
<div class="scrollable-content"> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
<p> 
 
Scrollable 
 
</p> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

Answer 3

是以下你在找什麼？：http://codepen.io/Skibbereen-Coderdojo/pen/BpbROm

我只是增加了一個高度，你.scrollable-content規則

.scrollable-content{ 
    flex:1; 
    overflow-y:auto; 
    background:lightBlue; 
    height: 100vh; /*Constrain the height */ 
} 

添加一個固定的高度將限制你的.scrollable-content，然後你的overflow-y:auto;將踢在一個nd照顧其餘的人。

Answer 4

提到div滾動的高度。並啓用scroll-y：auto。

增加了一個搗鼓你：

`https://jsfiddle.net/Safoora/cpcygkno/6/` 

Hope it will help.