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>