Responsive divs needed with auto width - css

Question

I try to have a row with 3 divs.
The middle div should be responsive with a mex-width, remaining space left and write should be filled in with a color.
I know I could solve this using an wrapper with auto-margin left and right but I need to have the center div transparent and not showing the wrapper background color.
I tried to solve this using a display table but did not manage to do this.
<div id="table">
<div id="row">
<div id="left"></div>
<div id="middle">Row 1</div>
<div id="right"></div>
</div>
<div style="clear:both;"></div>
<div id="row">
<div id="left"></div>
<div id="middle">Row 2</div>
<div id="right"></div>
</div>
<div style="clear:both;"></div>
</div>
with css
#table {
width:100%;
display:table;
}
#row {
width:100%;
display:table-row;
margin-bottom:10px;
}
#left {
width:auto;
display:table-cell;
background-color: #FF0000;
}
#middle {
display:table-cell;
width:auto;
max-width: 100px;
height:50px;
background-color: #eeeeee;
}
#right {
width:auto;
display:table-cell;
background-color: #FF0000;
}
http://jsfiddle.net/thepofo/kdJHh/2/
Ideas are welcome.

Answer 1

The hacky way
http://jsfiddle.net/coma/rFg2L/2/
.foo {
overflow: hidden;
}
.foo > div {
position: relative;
margin: 0 auto;
max-width: 100px;
}
.foo > div:before,
.foo > div:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 999999px;
background-color: red;
}
.foo > div:before {
right: 100%;
}
.foo > div:after {
left: 100%;
}
The flexbox way (http://caniuse.com/#search=flex)
http://jsfiddle.net/coma/YYm32/
.foo {
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
}
.foo > div {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
.foo > div:nth-child(2) {
max-width: 100px;
}
.foo > div:first-child,
.foo > div:last-child {
background-color: red;
}
Bonus track
You don't need to add extra markup to clear your floats: http://jsfiddle.net/coma/Lqc2H/

Answer 2

This may or may not be enough to work for you, but how about setting the div to 33% width of the wrapper.
<div class="wrap">
<div class="left"> </div>
<div class="middle">Lorem ipsum dolor...</div>
<div class="right"> </div>
</div>
.wrap>div {
float:left;
width: 33%;
}
.middle {
max-width: 200px;
outline:1px solid;
}
fiddle here
Otherwise, you might want to consider media queries for specific widths.