fluid semi-fluid fluid divs

Question

.mid{
    margin:0 auto;
    max-width:10em;
    min-width:5em;
    border:1px solid red;
}

<div class='mid'>...</div>

This code creates one centered div that will expand up to 10em and shrunk to 5em if browser window is small enough. Almost all I want.

Is it possible to create three divs in a row where middle div will behave exactly like .mid (expand up to 10em, shrunk to 5em) with left and right divs behaving like margins on auto: expanding to center .mid and shrinking to 0 if there's not enough space.

The closest solution I have found is this. Only problem is that .mid is not shrinking because td doesn't have mix-width and max-width.

.cont{
    display:table;
   /* table-layout:fixed; /* this prevented shrinking */
    width:100%;
}
.cont div{
    display:table-cell;
    overflow:hidden;

    
}
 .mid{
    width:10em;    /* in table width behaves like max-width*/
    border:1px solid red;
}

<div class='cont'>

    <div>left</div>
    <div class='mid'>...</div>
    <div>right</div>
    
</div>

Am I missing something or it's not possible to create this layout with in html/css?

Answer 1

You may use the flex properties : http://jsfiddle.net/7v1m5g8d/1/

.cont {
    display:flex;
    width:100%;
    border:1px solid blue;
    text-align:center;
}
.cont div {
    flex:1;
}
.cont div.mid {
    /* strippes for demo */
    background:repeating-linear-gradient(to right, transparent 0, transparent 0.9em, gray 0.9em, gray 1em);
    min-width:5em;
    max-width:10em;
    flex:auto;/* reset */
    border:1px solid red;
}
/* do not forget to add prefix-vendor if needed or a script as prefixfree.js :) */

<div class='cont'>
    <div>left</div>
    <div class='mid'>...</div>
    <div>right</div>
</div>