Wrap child elements that have% as margin with inline-block - html

Question

I want some elements on one line and get their parent to an equal size to the kids, the only problem is when I put % margin on the children, then they do not fit
It works with pixels in margin instead but I need to use % in this case to make it work responsively
jsfiddle: http://jsfiddle.net/
html:
<div class="holder">
<div class="blue">
</div>
<div class="red">
</div>
<div class="green">
</div>
</div>
css:
.holder
{
background-color:yellow;
display:inline-block;
}
.holder > div
{
width:200px;
height:200px;
display:inline-block;
margin-left:2%;
}
.blue
{
background-color:blue;
}
.red
{
background-color:red;
}
.green
{
background-color:green;
}

Answer 1

update below css. check link jsfiddle
.holder
{
background-color:yellow;
display:inline-flex;
}

Answer 2

It wouldn't...If you use inline-block then the holder div collapses to the width of the contents. So 2% would be OK but if you add in the 6% (3 * 2%) then the holder gets wider and the margin would then be increased...and so on and so on ad infinitum.
What happens is the holder div keeps it's original size (since it can't be calculated due to the infinity margin loop) as though the 'extra space' wasn't applied but adds the margin in anyway (once) and the layout breaks.
SEE - http://jsfiddle.net/19s19oL7/
AS mentioned by Ankush Kondhalkar flexbox is a solution although support is relatively limited at present. In the interim, use px and media queries.