CSS Make last child to dynamically take width which left in parent - html

Question

In my case childs number is returned from server side. In case there are less than 6 childs I need to add dummy child which would take left place of parent.
For example :
1 situation with two childs
2 situation with three childs
fiddle
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="big-child"></div>
</div>
#container{
width: 100%;
height: 200px;
background-color: gray;
}
#container > div {
float: left;
background-color: black;
width: 100px;
height: 100px;
margin-right: 20px;
}
.big-child {
width: 59%!important;
margin-right: 0px!important;
}
How could I achieve this with only CSS and withoud dinamically changing child width with javascript?
UPDATE
Found good website which generates CSS code depending on your boxes needs.

Answer 1

On modern browser you could use flexbox
http://codepen.io/anon/pen/yyMgQL
CSS:
#container {
display: -ms-flexbox; /* IE 10 syntax */
display: flex;
width: 100%;
height: 200px;
background-color: gray;
}
#container > div {
background-color: black;
width: 100px;
height: 100px;
margin-right: 20px;
}
#container > div.big-child {
-ms-flex-grow: 1; /* IE 10 syntax */
flex-grow: 1;
margin-right: 0;
}
Further info:
- http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://css-tricks.com/old-flexbox-and-new-flexbox/
Browser support: http://caniuse.com/#feat=flexbox
(note that IE10 is supported but it implements an older syntax)

Answer 2

If you want to use floats, you can use overflow:hidden; on the last child to force it to occupy the remaining space.
Alternative solutions could be to use flexbox (depending on your required browser support) or CSS tables.
#container {
width: 100%;
height: 200px;
background-color: gray;
}
#container > div {
box-sizing: border-box;
margin-right: 0;
height: 100px;
}
#container > div:not(:last-child) {
margin-right: 10px;
}
.child {
float: left;
background-color: black;
width: 100px;
}
.big-child {
overflow: hidden;
background-color: black;
margin: 0 20px;
}
<h4>Three Blocks</h4>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="big-child"></div>
</div>
<h4>Two Blocks</h4>
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="big-child"></div>
</div>