Problem CSS Flexbox: Dlaczego na szerokość moich dzieci wpływa ich zawartość?

Question

Dwoje dzieci w moim flexboxie ma styl box-flex: 1. Rozumiem, że ich szerokości powinny być równe równe sobie (oba zajmują 50% całkowitej szerokości ich nadrzędnego flexboxa). Ale kiedy zawartość zostanie dodana do dzieci, ich szerokość zmienia się (w zależności od zawartości i dopełnienia)! Dlaczego to się dzieje?

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

Rozwiązaniem dla tego celu jest dodanie width: 0 do .box1 elementów.

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

myślę, że okazało się, że się o mnie tutaj: http://oli.jp/2011/css3-flexbox/

Korzystna szerokość elementu box dziecka zawierającej treści tekstu jest obecnie tekst bez przerw liniowych prowadząc do bardzo nieintuicyjnych obliczeń szerokości i giętkości → zadeklaruj szerokość na elementowym elemencie potomnym z więcej niż kilkoma słowami (nigdy nie zastanawiam się dlaczego demony Flexbox są wszystkie "1,2,3 „)

Należy pamiętać, że w danej sytuacji, to wygląda o wiele łatwiejsze w użyciu display: table + table-layout: fixed: http://jsfiddle.net/thirtydot/fPfvN/1/

To będzie pracować w więcej przeglądarek.