CSS Flexbox问题:为什么我的flexchildren的宽度受其内容的影响？

Question

我的flexbox的两个孩子每个都有一个风格box-flex: 1.我的理解是它们的宽度应该彼此相等(两者都占其父Flexbox总宽度的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/

包含文本内容的box元素子元素的首选宽度当前是没有换行符的文本,导致非常不直观的宽度和弹性计算→在一个具有多个单词的box元素子元素上声明一个宽度(不知道为什么Flexbox演示都是"1,2,3"？)

请注意,对于您的情况,使用display: table+ 看起来要容易得多table-layout: fixed:http://jsfiddle.net/thirtydot/fPfvN/1/.虽然,flexbox确实允许您以一种display: table无法与之竞争的方式快速改变现状.