CSS Flexbox 문제 : 내 flexchildren의 너비가 내용물의 영향을받는 이유는 무엇입니까?

Question

나의 flexbox의 2 명의 아이들에게는 각각 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

해결 방법은 .box1 요소 width: 0를 추가하는 것입니다.

참조 :http://jsfiddle.net/thirtydot/fPfvN/

내가 여기 자신을 위해 그것을 발견 생각 : http://oli.jp/2011/css3-flexbox/

텍스트 내용을 포함하는 상자의 자식 요소의 기본 너비는 현재 줄 바꿈없는 텍스트 입니다, 매우 직관적이지도 않음 너비 및 굴곡 계산 → 상자 요소 자식에 대한 너비 선언 몇 마디 이상 (왜 flexbox 데모가 모두 "1,2,3 ") 상황에, 그것은 display: table + table-layout: fixed 사용하는 것이 훨씬 쉬워 보이는 것을

참고 : http://jsfiddle.net/thirtydot/fPfvN/1/

이 더욱 브라우저에서 작동합니다.