Jak zrobić zawijanie rodzica (i zmniejszyć jego pływające dzieci?

Question

Mam responsywny układ, który składa się z wielu elementów. Tutaj jest bardzo uproszczona wersja kodu:

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

Co usiłuję osiągnąć robi nagłówek (żółta skrzynka) przyjmują tę samą szerokość, co elementy div dziecka (zielone pola). I to działa dobrze, gdy układ jest renderowany w pierwszym, tutaj znajduje się zrzut ekranu z JSFiddle

ale gdy rozmiar ekranu staje się bardziej zawęzić nagłówek nie kurczy się poprawnie, tutaj znajduje się zrzut ekranu na mniejszym obszarze:

spędziłem kilka godzin próbując zrozumieć to, ale nie mogłem. Część wyzwaniem jest to, że nie wiem, co z góry liczba zielonych pudełkach będzie jak są renderowane dynamicznie przez .NET

Update 1

Fakt, że zielone pudełka owinąć jest pożądane, co staram się osiągnąć, aby żółte pudełko miało tę samą szerokość, co połączona szerokość zielonych skrzynek. Pożądany wynik:

Answer 1

Nie sądzę, że to możliwe, aby robić to, co chcesz z czystym CSS. Zwisająca przestrzeń jest tam, ponieważ pozostało po niej . Pole po prostu idzie poniżej, ponieważ nie ma wolnego miejsca powyżej, nie możesz zmniejszyć żółtego nagłówka, ponieważ nie "wie" nic o tym, że zielone skrzynki nie pasują. Próbowałem kilku hacków, ale nie mogłem go uruchomić. Najbezpieczniejszy zakład to iść z JS.

Poniżej przedstawiamy niektóre alternatywy, które warto sprawdzić, jeśli potrafią nieco zmienić swój projekt.

1. Nie określić rozmiar wcale

Możesz pozwolić flex-box co robi. JSFiddle. Działa z każdą liczbą elementów, ale stają się zbyt duże lub zbyt małe w zależności od wielkości i liczby dzieci.

2. Pozostawić do przestrzeni pomiędzy nimi

flex-box na ratunek ponownie, można użyć justify-content: space-between zachować nagłówek z najbardziej lewym oknie na najbardziej odpowiednim polu poprawnie, ale wprowadzają przestrzeń pomiędzy. JSFiddle.