让弹性盒模型失效

话不多说, 直接上代码(本文中所有代码只能在webkit内核运行)

CSS:
.parent{display:-webkit-box;width:800px;}
.child-left{width:200px;}
.child-right{-webkit-box-flex:1;}

html:
<div class='parent'>
    <div class='child-left'>左子节点</div>
    <label class='child-right'>右子节点</label>
</div>
<div class='parent'>
    <div class='child-left'>左子节点</div>
    <div class='child-right'>右子节点</div>
</div>

是不是觉得都应该是左200,右600.?事实却是:上面的parent是左200,右64;下面的parent才是左200,右600.我当时以为是弹性盒模型不好用了.因为项目已经进行到一大半,如果说不好用,改动特别大.当时心慌慌啊,从中午找到下午,没找到代码bug.加班继续,到晚上,突然想起来,label是行内元素,div是块级元素,于是写了下面一段css:

.child-right{-webkit-box-flex:1;display:block;}

一测,果然好用了啊.当时心里既开心又崩溃.而且只能是block,连inline-block都不行.不过好歹解决问题.完了后又出现下面的问题:

CSS:
.parent{display:-webkit-box;width:800px;}
.parent>div{-webkit-box-flex:1;}
.child-left{width:200px;}

HTML:
<div class='parent'>
    <div class='child-left'>左子节点</div>
    <div>右子节点</div>
</div>

本以为应该是:,左200, 右600.实际上却是:左右各400.据我所了解的知识深度而言, 暂时没有办法让第一个div标签,在受到弹性盒模型影响前提下,宽度保持200不变.所以只能将块属性标签变成行内属性标签.css如下:

.child-left{width:200px;display:inline/inline-block};