如何讓div百分比根據div min-width自動調整？

Question

下面的代碼按預期工作。我有兩個div，一個藍色，一個綠色。藍色格佔20％，紅色格佔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的百分比自動調整大小，使其仍然適合屏幕？

Answer 1

我想這是你想要什麼：

除了指定地圖的寬度爲80％，你真正想要的是填補寬度的其餘部分與#map元素。

這可以通過從#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; 
}