html5弹性盒子模型宽度设置问题

代码如下。一个id为container的div包含三个子div，第一个div宽度设置固定200.剩下两个用box-flex属性设置为1;3，为什么最后显示的宽度和预期不一样？col1宽度是200.整个container是600. col2和col3的flex比例是1：3,那么col2应该是（600-200）*1./4应该是100.，同理col3应该是300才对。为什么最后确是164的236？

<div id="container">
   <div id="col1">我是第一列的内容</div>
   <div id="col2">我是第二列的内容<br/>我是第二列的内容<br/>我是第二列的内容<br/>我是第二列的内容<br/>我是第二列的内容<br/></div>
   <div id="col3">我是第三列的内容</div>
*{ margin:0; padding:0;}
#container{ width:600px; background: #F93;display:box;display:-moz-box;display:-webkit-box; box-orient:horizontal; -moz-box-orient:horizontal;-webkit-box-orient:horizontal; }
#col1{ background: #FCC; width:200px;
}
#col2{ background:#F63;box-flex:1;-webkit-box-flex:1;-moz-box-flex:1;
} 
#col3{ background:#690;box-flex:3;-webkit-box-flex:3;-moz-box-flex:3;
}

下面图片是在chrome下显示的实际宽度

请注意那个提示宽度。

 

======================

处理办法：

解决办法，CSS代码修改如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#col2{    background:#F63;   box-flex:1;   -webkit-box-flex:1;   -moz-box-flex:1;   width: 0%;           /* 加上这行代码 */ }  #col3{    background:#690;   box-flex:3;   -webkit-box-flex:3;   -moz-box-flex:3;   width: 0%;           /* 加上这行代码 */ }

所有需要按照比例分解的列，都加上 width: 0%; 已经有固定值的列不需要加，原理不懂。

反正这个应该是CSS3新属性  box-orient  没有完善的原因。