当其中一个位于底部时，让两个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;
}

以下是jsfiddle code.

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

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

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;
}