コンテキストをスクロールする方法フレックスdiv

Question

私は単純なサイトレイアウトのヘッダーと3列のメインセクションを持っています。中央の列には長い内容が含まれていますので、スクロールしてみたいと思います。ここ は、問題のプロトタイプです： http://codepen.io/ValYouW/pen/GZxKBa

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。

Answer 1

の場合は、息子のスクロール（grid1）がコンテンツを上回る必要があります。グリッド1の内容に多くのbrを入れてみて、リードグリッドがスクロールを作成します。

Answer 2

＃leads-gridがすでにスクロールしています。 ＃leads-gridにコンテンツを追加するだけです。

以下のコードを参照してください。 高さ：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>