Come ottenere gli elementi di allineamento flexbox flex-end per lavorare in WebKit / Blink? - css, css3, flexbox

Sto cercando di nidificare una flexbox in un'altra casella flessibile. La scatola esterna è verticale:

+------+
|      |
+------+
|      |
|      |
|      |
+------+

Dove l'area superiore si adatta al contenuto flex 0 1 auto e la metà inferiore riempie lo spazio rimanente flex 1 1 auto.

Nella metà inferiore ho un altro flex-box in corsoorizzontale. Voglio che le 2 scatole interne siano distanziate tra lo spazio e il flex-end per gli elementi di allineamento, quindi fondamentalmente i 2 interni sono fissati agli angoli inferiori sinistro e destro come questo:

+------+
|      |
+-+  +-|
|L|  |R|
+------+

L'impostazione sembra funzionare in Firefox ma in Chrome (Blink) e Safari ottengo questo:

+------+
|      |
|      |
|      |
+-+--+-|
|L|  |R|
+-+  +-+

Ecco l'HTML

<div id="outer">
<div id="top">
top
</div>
<div id="bottom">
<div id="bottomcontents">
<div id="botleft">
bottom left
</div>
<div id="botright">
bottom right
</div>
</div>
</div>
</div>

E c'è il CSS

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}

#outer {
height: 100%;
border: 1px solid red;
display: flex;
display: -webkit-flex;
flex-flow: column;
-webkit-flex-flow: column;
justify-content: center;
align-content: center;
align-items: center;
-webkit-justify-content: center;
-webkit-align-content: center;
-webkit-align-items: center;
min-height: auto;
}
#top {
width: 100%;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
border: 1px solid blue;
}
#bottom {
width: 100%;
height: 100%;
flex: 1 1 auto;
-webkit-flex: 1 1 auto;
border: 1px solid green;
}
#bottomcontents {
height: 100%;
width: 100%;
border: 1px solid pink;
display: flex;
display: -webkit-flex;
flex-flow: row;
-webkit-flex-flow: row;
justify-content: space-between;
align-content: center;
align-items: flex-end;
-webkit-justify-content: space-between;
-webkit-align-content: center;
-webkit-align-items: flex-end;
min-height: auto;
}

#botleft, #botright {
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}
#botleft {
border: 1px solid purple;
}
#botright {
border: 1px solid cyan;
}

E qui è un violino

Funziona come previsto in Firefox. Ho fatto qualcosa di male? Si tratta di un bug in Chrome e Safari? C'è una soluzione?

risposte:

3 per risposta № 1

Fondamentalmente, quello che stai vedendo è che "l'altezza: 100%; "su #bottomcontents sta forzando il contenitore" all'esterno "del contenitore circostante. L'altezza del 100% finisce per ottenere l'altezza dal suo genitore, che ha anche il 100% di altezza, il che significa che l'altezza specificata per #bottomcontents è impostato alla stessa altezza di #outer. Puoi vedere un po 'più chiaramente che va oltre ciò che dovrebbe se aggiungessi "overflow: hidden;" a #bottom. Una discussione più approfondita del tuo problema può essere trovata qui: stai correndo è coperto qui: Altezza 100% sul bambino della colonna flexbox

A meno che non mi manchi un certo requisito di cui hai bisogno, puoi anche rimuovere il contenitore #bottomcontents ed effettuare il dovuto solo con #bottom. Esempio di codice (esempio jsfiddle in basso):

HTML:

<div id="outer">
<div id="top">
top
</div>
<div id="bottom">
<div id="bottomcontents">
<div id="botleft">
bottom left
</div>
<div id="botright">
bottom right
</div>
</div>
</div>
</div>

CSS:

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
}

#outer {
border: 5px solid red;
display: flex;
display: -webkit-flex;
height: 100%;
width: 100%;
flex-direction: column;
-webkit-flex-direction: column;
}

#top {
width: 100%;
border: 5px solid blue;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}

#bottom {
width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
height: 100%;
border: 5px solid green;
align-items: flex-end;
-webkit-align-items: flex-end;
}

#left {
border: 5px solid purple;
padding: .5em;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}

#right {
border: 5px solid cyan;
padding: .5em;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}

Il mio violino: http://jsfiddle.net/blake770/2br5x/

---