Problema CSS Flexbox: perché la larghezza dei miei flexchildren è influenzata dal loro contenuto?

Question

I 2 figli del mio flexbox hanno uno stile box-flex: 1. La mia comprensione è che le loro larghezze dovrebbero quindi essere uguali l'una all'altra (entrambe occupano 50% della larghezza totale della propria casella flessibile padre). Ma quando il contenuto viene aggiunto ai bambini, la loro larghezza cambia (a seconda del contenuto e del riempimento)! Perché succede?

CSS:

.hasFlex { 
    display: box; 
    display: -webkit-box; 
    display: -moz-box; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    box-align: start;} 
.box0 { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0;} 
.box1 { 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1;} 
.box2 { 
    -webkit-box-flex: 2; 
    -moz-box-flex: 2; 
    box-flex: 2;} 
.box3 { 
    -webkit-box-flex: 3; 
    -moz-box-flex: 3; 
    box-flex: 3;} 
.container { 
margin-bottom: 10px; 
} 

HTML:

<div class="container hasFlex"> 
<div id="main" role="main" class="box1"> 
    <div class="innerBG"> 
     a bunch of stuff (divs, text, etc) go here 
    </div> 
</div> 
<div id="sidebar" class="box1"> 
    <div class="innerBG"> 
     a bunch more stuff (divs, text, etc.) go here 
    </div> 
</div> 
</div> 

Answer 1

La soluzione per questo è di aggiungere width: 0 agli .box1 elementi.

See:http://jsfiddle.net/thirtydot/fPfvN/

penso che ho trovato che per me stesso qui: http://oli.jp/2011/css3-flexbox/

La larghezza preferita di un bambino elemento scatola contenente il contenuto del testo è attualmente il testo senza interruzioni di riga, portando a intuitivi calcoli della larghezza e della flessibilità di → dichiara una larghezza su un elemento della scatola figlio con più di poche parole (chiedersi perché mai le demo di Flexbox sono tutte "1,2,3 “)

Si noti che per la vostra situazione, sembra molto più facile da usare display: table + table-layout: fixed:? http://jsfiddle.net/thirtydot/fPfvN/1/

Questo funziona anche in altri browser.