親divが浮動小数点をラップ（および縮小）する方法を教えてください。

Question

私は素早い要素からなるレスポンシブなレイアウトを持っています。

HTML：：

<div class="parent"> 
    <div class="header"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
    <div class="child"></div> 
</div> 

CSS：

.parent { 
    background: red; 
    display:inline-block; 
} 

.child { 
    background: green; 
    width:100px; 
    height:100px; 
    float:left; 
} 

.header { 
    background: yellow; 
    width:100%; 
    height:30px; 
} 

JSFiddle

私は、ヘッダーを作って達成しようとしています（黄色のボックスここでは、コードの非常に単純化したバージョンです）は、子divs（緑色のボックス）と同じ幅になります。レイアウトが最初にレンダリングされたときにうまくいきます。ここにJSFiddleのスクリーンショットがあります。

しかし、画面サイズが狭くなると、ヘッダーが正しく縮小されません。ここでは小さい領域のスクリーンショットがあります。

私はそれを理解しようとして数時間を過ごしたが、私はできませんでした。挑戦の一部は、私は緑色のボックスの数が、彼らは緑色のボックスをラップすることを.NETで動的に

アップデート1

事実をレンダリングしているのように何が起こっているか事前に知っていないということです私が達成しようとしているのは、黄色のボックスが緑のボックスの幅を合わせた幅と同じ幅になることです。希望する結果：

Answer 1

私はそれが純粋なCSSであなたがやりたいことができないと思います。宙ぶらりんな空間はそこにあります。それは、どれくらいの空間がに残っているのでしょうか？です。緑色のボックスが収まりませんという事実については「認識」していないため、黄色のヘッダーを縮小することはできません。私はいくつかのハックを試みたが、それを動作させることができなかった。最も安全な賭けはJSと行くことです。

しかし、ここでは、デザインを少し変更する柔軟性があるかどうかを確認する価値のあるいくつかの選択肢があります。

1.あなたはflex-boxはそのことをやらせることができ、すべての

でサイズを指定しないでください。 JSFiddle。すべての要素数で動作しますが、親のサイズと子の数に応じて大きすぎたり小さすぎたりします。

2.再び救助に

flex-boxわたってるしきスペースを許可する、あなたは正しく、最も右のボックスに、最も左のボックスからヘッダーを保つためにjustify-content: space-betweenを使用しますが、間にスペースを導入することができます。 JSFiddle。