Howto Scroll einen Kontext flex div

Question

Ich habe eine einfache Website-Layout von Header und eine 3 Spalten Hauptteil. Die mittlere Spalte sollte einen längeren Inhalt enthalten, also würde ich gerne scrollen, das kann ich nicht machen. Hier ist ein Prototyp des Problems: http://codepen.io/ValYouW/pen/GZxKBa

UPDATE: Sorry für die nicht zu erwähnen, aber ich meinte, für den horizontalen Bildlauf, nicht vertikal ...

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>

Irgendwelche Ideen wie man # leads-grid zum scrollen bringt? Thx.

Answer 1

für die Leads-Raster haben Scroll sein Sohn (Grid1) muss den Inhalt zu übertreffen. versuchen Sie, eine Menge Brs in den Inhalt von grid1 und Leads-Grid wird eine Rolle zu erstellen.

Answer 2

Ihr # leads-grid scrollt bereits. Sie müssen nur mehr Inhalt hinzufügen # Leads-Raster.

Siehe Code unten. Ich habe hinzugefügt Höhe: 5000px zu # grid1 als Inline-Stil. Scroll erscheint.

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>