html - container - Problema de CSS Flexbox: ¿Por qué el ancho de mis flexchildren se ve afectado por sus contenidos?

flexbox grid

Question

A los 2 niños de mi flexbox se les otorga un estilo de box-flex: 1 . Según entiendo, sus anchos deben ser iguales entre sí (ambos ocupan el 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 agregar width: 0 a los elementos .box1 .

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

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

El ancho preferido de un elemento de cuadro hijo que contiene contenido de texto es actualmente el texto sin saltos de línea, lo que da lugar a anchos muy poco intuitivos y cálculos flexibles → declarar un ancho en un elemento de elemento secundario con más de unas pocas palabras (¿Alguna vez se preguntó por qué son todas las demos flexbox? "1,2,3"?)

Tenga en cuenta que para su situación, parece mucho más fácil de usar display: table + table-layout: fixed : http://jsfiddle.net/thirtydot/fPfvN/1/ . Sin embargo, Flexbox te permite cambiar cosas rápidamente de una manera que se display: table no puede competir.