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

我box-flex: 1的两个孩子每个都被赋予一个box-flex: 1的风格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看起来要容易得多display: table + table-layout: fixed ： http : //jsfiddle.net/thirtydot/fPfvN/1/

这甚至可以在更多的浏览器中工作。