[CSS3] boxレイアウト（子要素の設定）

HTML

<p>子要素の設定</p>
<div id="container">
    <div id="box1">BOX1</div>
    <div id="box2">BOX2
        <br />内容を充実させます。
        <br />現在mozilla系、webkit系のみでflexがサポートされています。
        <br />プログレッシブ・エンハンスメントととして全部書いておくことを推奨します。</div>
    <div id="box3">３つ目の要素です
        <br />２行目は適当です。</div>
</div>

CSS

#container {
    display: -webkit-box;
    display: box;
    display: -webkit-flex;
    display: flex;
}
#box1 {
    width: 100px;
    background: yellow;
}
#box2 {
    /*width: 200px;*/
    min-width: 200px;
    -webkit-box-flex: 1;
    box-flex: 1;
    -webkit-flex: 2 0 200px;
    -moz-flex: 2 0 200px;
    flex: 2 0 200px;
    background: pink;
}
#box3 {
    width: 150px;
    background: lightgreen;
}