CSS Flexbox問題：爲什麼我的flexchildren的寬度受其內容影響？

Question

我的柔性箱的兩個孩子每個都給予box-flex: 1的風格。我的理解是，它們的寬度應該是彼此相等（均佔用其父柔性盒總寬度的50％）。但是，當內容添加到孩子們，他們的寬度變化（取決於內容和填充）！爲什麼會發生？

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

的解決方法，這是添加width: 0到.box1元素。

參見：http://jsfiddle.net/thirtydot/fPfvN/

我想我發現了我自己在這裏：http://oli.jp/2011/css3-flexbox/

包含文本內容的框子元素的首選寬度是 目前不換行文字，導致非常不直觀的 寬度和彎曲計算→在一個盒子元素子元素 上聲明一個寬度（超過幾個字）（曾經奇怪爲什麼flexbox演示全部是 「1,2,3 「）

注意，對於您的情況，它看起來更容易使用display: table + table-layout: fixed：http://jsfiddle.net/thirtydot/fPfvN/1/

這會甚至工作在更多的瀏覽器。