CSS Flexbox sorunu: Flexchildren'in genişliği neden içeriklerinden etkileniyor?

Question

Benim flexbox'ımın 2 çocuğunun her biri box-flex: 1 tarzında verilir. Anladığım kadarıyla, genişlikleri (her ikisi de % 50 ebeveynsel esnekliklerinin toplam genişliğini kaplıyor) olmalıdır. Ancak içerik çocuklara eklendiğinde, genişlikleri değişir (içeriğin ne olduğuna ve doldurulmasına bağlı olarak)! Bu neden oluyor?

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: Bunun

<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

geçici çözüm .box1 öğelere width: 0 eklemektir.

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

Ben burada kendime öğrendim düşünüyorum: http://oli.jp/2011/css3-flexbox/

metin içeriğine sahip bir kutu elemanı çocuğun tercih genişliği şu anda satır sonları olmadan metin olduğunu çok kasıtsız genişlik ve esnek hesaplamalar için lider → bir kutu sözcüğü üzerinde bir genişlik ifade etmek birkaç kelime ile (her zaman neden flexbox demoları tüm “1,2,3 olduğunu merak ediyorum “) Durumunuza, bu display: table + table-layout: fixed kullanımı çok daha kolay görünüyor

Not:? http://jsfiddle.net/thirtydot/fPfvN/1/

Bu daha tarayıcılar çalışacaktır.