Problemi di layout app CSS Flexbox

Question

Ho due codepens separati con cui ho lavorato, uno con il layout principale del sito, che funziona bene, e il secondo è un componente che vorrei aggiungere all'interno della barra laterale sinistra del main disposizione.

Il componente funziona perfettamente quando si trova all'interno di un contenitore con un'altezza impostata, si restringerà e si allungherà proprio come voglio se all'interno di questo tipo di genitore div.

Quando aggiungo il componente al layout principale, tuttavia esso espande la barra laterale sinistra, interrompendo il layout perfetto, voglio che il layout principale abbia le dimensioni della finestra corrente del browser e che la pagina non scorra mai. c'è un modo per dire queste barre laterali ".layout-left" ".layout-stage" e ".layout-right" per non espandere?

Ecco i codepens di cui parlavo:

layout principale di lavoro: http://codepen.io/AlexBezuska/pen/KwOagy

barra laterale di lavoro: http://codepen.io/AlexBezuska/pen/ZYgWYp

combinata (non funzionante): http://codepen.io/AlexBezuska/pen/LEwGJj

layout CSS I Sto usando:

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    width: 100%; 
    margin: 0 auto; 
} 

.layout-middle{ 
    display: flex; 
    flex: 1; 
} 

.layout-stage{ 
    flex: 1 0 320px; 
    background: #ffc94e; 
} 

.layout-left, .layout-right{ 
    flex: 0 0 320px; 
    background: #c9ea5d; 
} 

.layout-left{ 
    background: #85d6e4; 
} 

.layout-header{ 
    height: 100px; 
    background: #92e4c9; 
} 

.layout-footer{ 
    height: 150px; 
    background: #f7846a; 
} 

Answer 1

Desidero che il layout principale abbia le dimensioni della finestra corrente del browser e che la pagina non scorra mai.

In questo caso è necessario impostare un max-height per gli elementi, anche, almeno per layout-middle.

Answer 2

. Esigenze di riproduzione a sinistra display: flex; e flex-flow: column; Ho anche aggiunto un wrapper .container con display: flex; flex-direction: column; height: 100vh; e rimosso la maggior parte delle proprietà dal corpo. penna biforcuta: http://codepen.io/oosby/pen/GJJqvP

Answer 3

attualmente avete .layout-header, .layout-middle e .layout-footer set per riempire lo spazio verticale disponibile, il problema è la lunghezza dei contenuti all'interno .layout-left. Ci sono un paio di modi in cui puoi fermare il contenuto di .layout-left fuoriuscire dal contenitore.

metodo Overflow

Aggiungendo .overflow-y: auto;-.layout-left è possibile garantire che una barra di scorrimento viene visualizzata se il suo contenuto è più lungo di sua altezza, fermando il contenuto fuoriesca.

.panel { 
 
    display: flex; 
 
    flex-flow: column; 
 
    /*padding: 1em;*/ 
 
    overflow: hidden; 
 
    flex: 1;/*Add this*/ 
 
} 
 
header { 
 
    min-height: 32px;/*Add this*/ 
 
    height: 32px; /*must be 32px*/ 
 
    background: #c0c0c0; 
 
} 
 
footer { 
 
    background: #cfcfcf; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 
.select-list { 
 
    /*flex: 1;*/ 
 
    overflow-y: scroll; 
 
    /*max-height:16vh; Remove this*/ 
 
} 
 
.select-list-item { 
 
    background: white; 
 
    border: 1px solid black; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 

 
/*===============================================*/ 
 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    max-height: 100vh; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.layout-middle { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.layout-stage { 
 
    flex: 1 0 320px; 
 
    background: #ffc94e; 
 
} 
 
.layout-left, 
 
.layout-right { 
 
    flex: 0 0 320px; 
 
    background: #c9ea5d; 
 
} 
 
.layout-left { 
 
    background: #85d6e4; 
 
    overflow-y: auto;/*Add this*/ 
 
} 
 
.layout-header { 
 
    height: 100px;/*must be 100px*/ 
 
    background: #92e4c9; 
 
} 
 
.layout-footer { 
 
    height: 150px;/*must be 150px*/ 
 
    background: #f7846a; 
 
}

<div class="layout-header"> 
 
    <h1></h1> 
 
</div> 
 
<div class="layout-middle"> 
 
    <div class="layout-left"> 
 
    <!-- start content --> 
 
    <div class="panel"> 
 
     <header>panel header</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <!-- end content --> 
 
    </div> 
 
    <main class="layout-stage"> 
 
    <h2>stage</h2> 
 
    </main> 
 
    <aside class="layout-right"> 
 
    <h2>right</h2> 
 

 
    </aside> 
 
</div> 
 
<div class="layout-footer"> 
 
    <h2>Footer</h2> 
 
</div>

http://codepen.io/anon/pen/gppPrp

metodo Flex

Aggiungendo display: flex; e flex-direction: column;-.layout-left è possibile ottenere il suo contenuto per adattarsi allo spazio disponibile.

.panel { 
 
    display: flex; 
 
    flex-flow: column; 
 
    /*padding: 1em;*/ 
 
    overflow: hidden; 
 
    flex: 1;/*Add this*/ 
 
} 
 
header { 
 
    min-height: 32px;/*Add this*/ 
 
    height: 32px;/*must be 32px*/ 
 
    background: #c0c0c0; 
 
} 
 
footer { 
 
    background: #cfcfcf; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 
.select-list { 
 
    /*flex: 1;*/ 
 
    overflow-y: scroll; 
 
    /*max-height:16vh; Remove this*/ 
 
} 
 
.select-list-item { 
 
    background: white; 
 
    border: 1px solid black; 
 
    height: 32px;/*must be 32px*/ 
 
} 
 

 
/*===============================================*/ 
 

 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    max-height: 100vh; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 
.layout-middle { 
 
    display: flex; 
 
    flex: 1; 
 
} 
 
.layout-stage { 
 
    flex: 1 0 320px; 
 
    background: #ffc94e; 
 
} 
 
.layout-left, 
 
.layout-right { 
 
    flex: 0 0 320px; 
 
    background: #c9ea5d; 
 
} 
 
.layout-left { 
 
    background: #85d6e4; 
 
    display: flex;/*Add this*/ 
 
    flex-direction: column;/*Add this*/ 
 
} 
 
.layout-header { 
 
    height: 100px;/*must be 100px*/ 
 
    background: #92e4c9; 
 
} 
 
.layout-footer { 
 
    height: 150px;/*must be 150px*/ 
 
    background: #f7846a; 
 
}

<div class="layout-header"> 
 
    <h1></h1> 
 
</div> 
 
<div class="layout-middle"> 
 
    <div class="layout-left"> 
 
    <!-- start content --> 
 
    <div class="panel"> 
 
     <header>panel header</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <div class="panel"> 
 
     <header>Entities</header> 
 
     <div class="select-list" id="select-list"> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     <div class="select-list-item selected">0: bg</div> 
 
     </div> 
 
     <footer></footer> 
 
    </div> 
 
    <!-- end content --> 
 
    </div> 
 
    <main class="layout-stage"> 
 
    <h2>stage</h2> 
 
    </main> 
 
    <aside class="layout-right"> 
 
    <h2>right</h2> 
 

 
    </aside> 
 
</div> 
 
<div class="layout-footer"> 
 
    <h2>Footer</h2> 
 
</div>

http://codepen.io/anon/pen/qddEoz

Answer 4

Fixed CodePen (funziona anche su Firefox)

ho fatto 3 cambi:

1) ho impostato il hei lotta del corpo a quello desiderato:

body { 
    height: 100vh; 
} 

2) ho dato al contenitore sinistra a destra il modello di pugilato:

.layout-left, .layout-right{ 
    display: flex; 
    flex-direction: column; 
} 

3) Affinché i pannelli a non troppo pieno su Firefox, ho aggiunto questo:

div { 
    min-height: 0; 
} 

Quest'ultima impostazione è spiegato in this question da uno sviluppatore che lavora sul modello flex su Mozilla. Ovviamente è meglio impostarlo solo sulle relative unità genitore, ma questo è più semplice.