css, how to stop an element being squashed by container

css, how to stop an element being squashed by container

jsfiddle
I want to stop the .outer from changing shape/size when the window is
resized to be narrower than .outers contents by only applying style
directly to .outer if that is possible.
HTML:
<div class='outer'>
<div class='inner' style='background:#f00'>
</div>
<div class='inner' style='background:#0f0'>
</div>
<div class='inner' style='background:#00f'>
</div>
</div>
CSS:
.outer, .inner{
display: inline-block;
position: relative;
float: left;
margin: 0;
border: 0;
padding: 0;
overflow: visible;
}
.outer{
/*what to put in here*/
}
.inner{
width:50px;
height:50px;
}
in the jsfiddle if you resize the result panel to be thinner, you will see
the blue get pushed on to the next row, followed by the green square, I
would like the outer to maintain its original shape/size so the three
.inners maintain their positions.