Three floated divs expand to fill container width - html

Question

I don't think this is possible in pure CSS. I have three floated elements within a wrapping container and I want the central of the three to be the width of its content and those either side to fill in the remaining gaps left and right of this element.
<style>
.wrap {
width: 50%;
height: 100px;
background: green;
}
.cont {
background: red;
float: left;
display: inline-block;
height: 100px;
}
.c1, .c3 {
background: blue;
width: auto;
}
</style>
<div class="wrap">
<div class="cont c1"> </div>
<div class="cont c2">content</div>
<div class="cont c3"> </div>
</div>
http://jsfiddle.net/6eLdboqw/1/
I realise this is trivial in Javascript but I want to know if there's a pure CSS solution.

Answer 1

You could accomplish this by using CSS tables, with the middle div having a width of 1% to 'auto shrink':
.wrap {
width: 400px;
height: 100px;
background: green;
display: table;
}
.cont {
background: red;
display: table-cell;
height: 100px;
}
.c1,
.c3 {
background: blue;
width: auto;
}
.c2 {
width: 1%;
}
<div class="wrap">
<div class="cont c1"> </div>
<div class="cont c2">content</div>
<div class="cont c3"> </div>
</div>

Answer 2

You could do so using flexbox.
Here is a demo: http://jsfiddle.net/6eLdboqw/3/
.wrap {
width: 400px;
height: 100px;
background: green;
display: flex;
}
.c1,
.c3
{
flex: 1 1 auto;
}
.c2
{
flex: 0 0 auto;
}
.cont {
background: red;
height: 100px;
}
.c1, .c3 {
background: blue;
width: auto;
}
flex is the short-hand property for: flex-grow, flex-shrink, flex-basis.
So what we do is: .c1, .c3 may grow and shrink, but .c2 may not grow or shrink.