Проблема CSS Flexbox: почему ширина моих flexchildren зависит от их содержимого?

каждый из 2 детей моего flexbox имеет стиль 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>
1 51
html css css3 flexbox

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 не могут конкурировать.

79