Problema de CSS Flexbox: ¿Por qué el ancho de mis flexchildren se ve afectado por su contenido?

Question

Los 2 hijos de mi flexbox tienen un estilo de box-flex: 1. Según entiendo, sus anchos deberían ser iguales entre sí (ambos ocupando 50% del ancho total de su flexbox principal). Pero cuando se agrega contenido a los niños, su ancho cambia (¡según el contenido y el relleno)! ¿Por qué pasó esto?

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

La solución para esto es añadir width: 0 a los .box1 elementos.

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

Creo que he encontrado que por mí mismo aquí: http://oli.jp/2011/css3-flexbox/

La anchura preferida de un niño elemento de caja que contiene el contenido del texto es actualmente el texto sin saltos de línea, dando lugar a cálculos poco intuitivos ancho y flex → declarar un ancho en un elemento del elemento de cuadro con más de unas pocas palabras (siempre se ha preguntado por qué las demostraciones de flexbox son todas "1,2,3 “)

Tenga en cuenta que para su situación, se ve mucho más fácil de usar display: table + table-layout: fixed:? http://jsfiddle.net/thirtydot/fPfvN/1/

Esto va a trabajar incluso en más navegadores.