How do I a dynamic number of divs occupy all of the space in their container equally?

How do I a dynamic number of divs occupy all of the space in their
container equally?

I have a container in which there is a dynamic number of divs. I want all
of the divs to fit on one line without wrapping such that each div has the
same width. Both the number of divs and the size of the screen can change.
I'm hoping for a css solution.
In this fiddle the grey box should be filled with three equally-sized red,
green, and blue rectangles.
I've tried this to no avail.
#container {
width: 400px;
border: 2px solid #CCCCCC;
}
#container div {
width: auto;
display: inline-block;
height: 200px;
}
Thanks for any help you can provide!