Problemy z układem aplikacji CSS Flexbox

Question

Mam dwa osobne kodeki, z którymi pracowałem, jeden z głównym układem witryny, który działa dobrze, a drugi to komponent, który chciałbym dodać na lewym pasku bocznym głównego układ.

Komponent działa idealnie, gdy znajduje się wewnątrz kontenera o ustawionej wysokości, zmniejszy się i rozciągnie tak, jak chcę, jeśli znajduje się w tym rodzimym dziale rodzica.

Po dodaniu komponentu do głównego layoutu rozszerza lewy pasek boczny, łamiąc idealny układ, chcę, aby główny układ był wielkości bieżącego okna przeglądarki i strony, która nigdy nie będzie przewijana. czy jest sposób, aby powiedzieć, że te paski boczne ".layout-left" ".layout-stage" i ".layout-right" nie rozszerzają się?

Oto codepens Mówiłam o:

głównego układu pracy: http://codepen.io/AlexBezuska/pen/KwOagy

paska bocznego Praca: http://codepen.io/AlexBezuska/pen/ZYgWYp

Combined (nie działa): http://codepen.io/AlexBezuska/pen/LEwGJj

układ CSS I używam:

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

Chcę, aby główny układ był wielkości bieżącego okna przeglądarki, a strona nigdy nie przewijać.

W tym przypadku trzeba ustawić max-height dla elementów, też, przynajmniej na layout-middle.

Answer 2

. Potrzebujące lewicowe potrzeby display: flex; i flex-flow: column; Dodałem również opakowanie .container z display: flex; flex-direction: column; height: 100vh; i usunąłem większość właściwości z treści. rozwidlony pióro: http://codepen.io/oosby/pen/GJJqvP

Answer 3

Masz aktualnie .layout-header, .layout-middle i .layout-footer zestaw do wypełnienia dostępnej przestrzeni w pionie, problem jest długością zawartości wewnątrz .layout-left. Istnieje kilka sposobów na zatrzymanie wylewania się zawartości kontenera z poziomu .layout-left.

metoda przelewowy

Dodając .overflow-y: auto; do .layout-left można zapewnić, że pasek przewijania jest wyświetlany, jeżeli jego treść jest dłuższa niż jej wysokość, zatrzymując zawartość z wycieki.

.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

metoda Flex

Dodając display: flex; i flex-direction: column; do .layout-left można uzyskać jego zawartość mieści się w wolnej przestrzeni.

.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 (działa również na Firefox)

zrobiłem 3 zmiany:

1) mam ustawić Hei GHT ciała do pożądanego jednym:

body { 
    height: 100vh; 
} 

2) Dałem do lewego pojemnika odpowiedni model bokserski:

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

3) Aby paneli do nie przelewowy na Firefox, Dodałem to:

div { 
    min-height: 0; 
} 

to ostatnie ustawienie jest wyjaśnione w this question przez programistę, który pracuje na modelu flex w Mozilli. Oczywiście lepiej ustawić go tylko na odpowiednich elementach div, ale to było prostsze.