DIV與固定與DIV的靈活寬度相鄰

Question

在左右填充2％的容器中，我有兩個DIV框。左邊的div框的固定寬度爲200px，固定的margin-right爲60px。我想要正確的div來調整其寬度越小/更大的瀏覽器窗口獲得。我如何實現紅色框的寬度始終（獨立於瀏覽器寬度）填充直到容器的邊距填充開始，而藍色div保持其200px？

的jsfiddle：http://jsfiddle.net/3vhrst19/3/

HTML：

<div id="container"> 
    <div id="fixed-width"></div> 

    <div id="flexible-width"></div> 
</div> 

CSS：

#container { 
    float: left; 
    width: 100%; 
    padding: 50px; 
    background: lightgrey; 
} 

#fixed-width { 
    float: left; 
    width: 200px; 
    height: 500px; 
    margin-right: 60px; 
    background: blue; 
} 

#flexible-width { 
    float: left; 
    width: 500px; /* my goal is that the width always fills up independent of browser width */ 
    height: 500px; 
    background: red; 
} 

Answer 1

這是easially實現與flexbox：

#container { 
    display: flex; 
    width: 100%; 
    padding: 50px; 
    background: lightgrey; 
    box-sizing: border-box; /* used so the padding will be inline and not extend the 100% width */ 
} 

凡應答元件填滿剩餘空間與flex-grow：

#flexible-width { 
    flex: 1; /* my goal is that the width always fills up independent of browser width */ 
    height: 500px; 
    background: red; 
} 

注意，我刪除了所有的floats的因爲在這個例子中沒有必要。

JSFiddle

Answer 2

使用calc以除去從100％的寬度的固定寬度和餘量寬度

#container { 
 
    float: left; 
 
    width: 100%; 
 
    padding: 50px; 
 
    background: lightgrey; 
 
} 
 
#fixed-width { 
 
    float: left; 
 
    width: 200px; 
 
    height: 500px; 
 
    margin-right: 60px; 
 
    background: blue; 
 
} 
 
#flexible-width { 
 
    float: left; 
 
    max-width: 500px; 
 
    /* my goal is that the width always fills up independent of browser width */ 
 
    width: calc(100% - 260px); /* Use calc to remove the fixed width and margin width from the 100% width */ 
 
    height: 500px; 
 
    background: red; 
 
}

<div id="container"> 
 
    <div id="fixed-width"></div> 
 

 
    <div id="flexible-width"></div> 
 
</div>