內部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://stackoverflow.com/questions/5505554/set-edge-divs-to-fill-remaining-width