如何根据div min-width自动调整div百分比？

Question

以下代码按预期工作。我有两个div，一个蓝色，一个绿色。蓝色div占20％，红色div占80％。

html,body {
    height: 100%;
}

body {
    margin: 0;
}

#panel {
    width: 20%;
    height: 100%;
    background-color: #0794ea;
    float: left;
}

#map {
    width: 80%;
    height: 100%;
    background-color: green;
    float: right;
}

我现在需要将蓝色div #panel设置为最小宽度为410px。所以我将它添加到#panel div。结果如下：

绿色div已被推到窗口高度以下，现在看不到。如何让绿色div的百分比自动调整大小以使其仍然适合屏幕？

Answer 1

我认为这就是你想要的：

你真正想要的是用#map元素填充宽度的其余部分，而不是将地图的宽度指定为80％。

这可以通过从#map元素中删除float:right并添加overflow:auto来实现 - 这会导致地图元素占用剩余的宽度

<强> FIDDLE

#panel {
    width: 20%;
    height: 100%;
    background-color: #0794ea;
    float: left;
    min-width: 410px;
}

#map {
    height: 100%;
    background-color: green;
    overflow:auto;
}