在一个有2%左右填充的容器中，我有两个div框。左侧div框的宽度固定为200px，右侧边距固定为60px。我想要正确的div调整它的宽度，浏览器窗口变小/变大。我如何实现红色框的宽度（独立于浏览器的宽度）一直填充到容器的rigth填充开始，而蓝色div保持其200px？
JSfiddle:http://jsfidle.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;
}
这可以通过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;
}
请注意，我删除了所有的浮点，因为在本例中这是不必要的。
JsFiddle
使用calc从100%宽度中删除固定宽度和边距宽度
null
#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>