如何滾動上下文flex div

我有一個簡單的頁眉佈局和3列的主要部分。中間一列應該包含一個冗長的內容，所以我希望它滾動，我不能讓它發生。這是問題的一個原型： http://codepen.io/ValYouW/pen/GZxKBa 如何滾動上下文flex div

UPDATE：對不起，不提，但我的意思是用於水平滾動，而不是垂直...

html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    box-sizing: border-box; 
 
} 
 

 
#layout { 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    border: 4px solid red; 
 
} 
 

 
#header { 
 
    border: 2px solid yellow; 
 
} 
 

 
#main { 
 
    border: 2px solid green; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: row; 
 
} 
 

 
#facets{ 
 
    border: 2px solid pink; 
 
    display: flex; 
 
    width: 100px; 
 
} 
 

 
#report { 
 
    border: 2px solid pink; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
} 
 

 
#rightside { 
 
    border: 2px solid pink; 
 
    display: flex; 
 
    width: 100px; 
 
} 
 

 
#chips { 
 
    border: 2px solid orange; 
 
} 
 

 
#leads-grid { 
 
    border: 4px solid orange; 
 
    display: flex; 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 

 
#grid1 { 
 
    border: 2px solid black; 
 
    width: 1000px; 
 
}

<div id="layout"> 
 
    <div id="header">Header</div> 
 
    <div id="main"> 
 
    <div id="facets">Facets</div> 
 
    <div id="report"> 
 
     <div id="chips">Chips</div> 
 
     <div id="leads-grid"> 
 
     <div id="grid1">How to make my parent (#leads-grid) scroll?</div> 
 
     </div> 
 
    </div> 
 
    <div id="rightside">Right side</div> 
 
    </div> 
 
    <div>

任何想法如何使＃鉛柵格滾動？ Thx。

來源

2016-04-12 user1797294

'＃導線，grid'做滾動不已：http://codepen.io/anon/pen/ONvJEp –

你的意思是讓'＃grid1'卷軸？ http://codepen.io/anon/pen/jqzOKZ –

在Chrome上測試。 –

爲引線柵格有滾動他的兒子（grid1）需要超過內容。嘗試在grid1的內容中添加大量的br，並且lead-grid將創建一個滾動條。

來源

2016-04-12 23:53:26 fdfey

您的＃鉛柵已滾動。您只需將更多內容添加到＃鉛柵格。

查看下面的代碼。我添加了height：5000px到＃grid1作爲內嵌樣式。出現滾動。

html, 
 
body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    box-sizing: border-box; 
 
} 
 

 
#layout { 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
    border: 4px solid red; 
 
} 
 

 
#header { 
 
    border: 2px solid yellow; 
 
} 
 

 
#main { 
 
    border: 2px solid green; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: row; 
 
} 
 

 
#facets { 
 
    border: 2px solid pink; 
 
    display: flex; 
 
    width: 100px; 
 
} 
 

 
#report { 
 
    border: 2px solid pink; 
 
    display: flex; 
 
    flex: 1; 
 
    flex-direction: column; 
 
} 
 

 
#rightside { 
 
    border: 2px solid pink; 
 
    display: flex; 
 
    width: 100px; 
 
} 
 

 
#chips { 
 
    border: 2px solid orange; 
 
} 
 

 
#leads-grid { 
 
    border: 4px solid orange; 
 
    display: flex; 
 
    flex: 1; 
 
    overflow: auto; 
 
} 
 

 
#grid1 { 
 
    border: 2px solid black; 
 
    width: 1000px; 
 
}

<div id="layout"> 
 
    <div id="header">Header</div> 
 
    <div id="main"> 
 
    <div id="facets">Facets</div> 
 
    <div id="report"> 
 
     <div id="chips">Chips</div> 
 
     <div id="leads-grid"> 
 
     <div id="grid1" style="height: 5000px;">How to make my parent (#leads-grid) scroll?</div> 
 
     </div> 
 
    </div> 
 
    <div id="rightside">Right side</div> 
 
    </div> 
 
    <div>

來源

2016-04-13 04:11:35

對不起，但我的意思是水平滾動，而不是垂直... – user1797294

如何滾動上下文flex div

回答

相關問題