css - 当其中一个在底部时，使两个 DIV 填充其父级

Question

我在一个 DIV 中有两个 DIV。其中一个 DIV 向左浮动，因此另一个 div 用于填充外部窗口。如果我放大或缩小外部 DIV，我希望在 DIV 内部填充外部 DIV。
示例代码：

<div id="main_container">
    <div id="left_container"></div>
    <div id="right_container"></div>
</div>​

和 CSS 规则是

#main_container {
    border: 1px ridge blue;
    overflow: hidden;
    height: 93%;
}

#left_container{
    margin: 10px;
    height: 100px;
    border: 1px solid red;
    float: left;
    overflow: hidden;
    min-width: 200px;
}

#right_container{
    margin: 10px;
    height: 100px;
    border: 1px solid magenta;
    min-width: 200px;
    overflow: hidden;
}

​</p>

这是jsfiddle代码。

重新调整 html 窗口，当另一个在底部时，您会看到红色的一个没有填充它。

编辑：为了澄清，我添加了图片

Answer 1

@media screen and (max-width: 441px) {
    #left_container{
        float: none;
    }
}

441px只是一个例子（两个块min-width+边margins+ border- 1）。

Answer 2

添加

width: 98%;

（根据需要调整）

到#left_container 和#right_container

Answer 3

给min-width主 div。

#main_container {
    border: 1px ridge blue;
    overflow: hidden;
    height: 93%;
    min-width: 400px;
}