内部div自动扩张剩余宽度

<div id="container">
    <div id="left">左边</div>
    <div id="mid"><input type="text" style="width:100%" value="我是自动扩展的，但不会破坏父容器的宽度。除了左边和右边占用的宽度后，剩下的宽度就是我的了。" /></div>
    <div id="right">右边</div>
</div>

#container {
    width: 400px;
    height: 200px;
    display: table
}
#left, #mid, #right {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue
}
#mid {
    width: 100%;
    background: #f0f;

}

#left,#right {
    padding-left:15px;
    padding-right:15px;
    white-space:nowrap;
}

http://jsfiddle.net/xhCXq/350/

http://*.com/questions/5505554/set-edge-divs-to-fill-remaining-width