Ecco il codice che sto usando per ottenere il layout sopra:
.header {
height: 50px;
}
.body {
position: absolute;
top: 50px;
right: 0;
bottom: 0;
left: 0;
display: flex;
}
.sidebar {
width: 140px;
}
.main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
display: flex;
}
.column {
padding: 20px;
border-right: 1px solid #999;
}
<div class="header">Main header</div>
<div class="body">
<div class="sidebar">Sidebar</div>
<div class="main">
<div class="page-header">Page Header. Content columns are below.</div>
<div class="content">
<div class="column">Column 1</div>
<div class="column">Column 1</div>
<div class="column">Column 1</div>
</div>
</div>
</div>
Ho omesso il codice utilizzato per lo styling. Puoi vederlo tutto dentro penna .
Quanto sopra funziona, ma quando il content
contenuto dell'area trabocca, fa scorrere l'intera pagina. Voglio solo scorrere l'area stessa del contenuto, quindi ho aggiuntooverflow: auto
al content
div .
Il problema con questo ora è che le colonne stesse non si estendono oltre l'altezza dei loro genitori, quindi anche i bordi vengono tagliati lì.
Ecco la penna che mostra il problema di scorrimento .
Come posso impostare l' content
area per scorrere in modo indipendente, pur avendo i suoi figli estendersi oltre l' content
altezza della casella?