添加可滚动的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.