具有固定with的Div和具有灵活宽度的Div紧挨着

Question

在一个有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;
}

Answer 1

使用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>

Answer 2

这可以通过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