Bir içerik flex bölmesi nasıl kaydırılır

Question

Basit bir site yerleşimi ve 3 sütun ana bölümüm var. Ortadaki sütun uzun bir içerik içermeli, bu yüzden kaymasını istiyorum, bunu gerçekleştiremem. http://codepen.io/ValYouW/pen/GZxKBa

GÜNCELLEME: ... söz değil için üzgünüm, ama yatay-kaydırma, dikey değil içindir

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>

İşte sorunun bir prototipidir # Lead-grid'in nasıl kaydırılacağı hakkında herhangi bir fikrin var mı? Thx. Lead-grid için

Answer 1

, içeriğinin üstesinden gelmek için oğlu (grid1) kaydırması gerekir. Bir çok ızgarayı grid1'in içeriğine koymaya çalışın ve lead-grid bir kaydırma oluşturacaktır.

Answer 2

# kılavuzlar-ızgaranız zaten kaydırma yapıyor. Sadece # lead-grid'a daha fazla içerik eklemeniz gerekiyor.

Aşağıya bakın. yüksekliğini: 5000px satır içi stil olarak # grid1 ekledim. Kaydırma belirir.

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>