html - 溢出时调整中间 div 以填充 div 之间的空间：隐藏；不工作

Question

我有四个div。一个容器和三列。第 1 列和第 3 列具有固定宽度，第 2 列需要填补它们之间的空隙。我希望设计可以根据屏幕宽度重新调整大小，最小为300px.

我的 HTML

<div id="container">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

CSS

#container {
width:100%;
min-width:300px;
position:relative;
}
#1 {
float:left;
min-width:300px;
min-height:10px;
background-color:red;
}

#2 {
overflow:hidden;
width:100%;
min-height:10px;
background-color:blue;
}

#3 {
float:right;
min-width:300px;
background-color:green;
}

Answer 1

只需删除宽度：100%；从＃2。它将自动占用整个可用空间。检查小提琴： http: //fiddle.jshell.net/ozeczek/aVbC6/