固定的Div和宽度灵活的div相邻。

Question

在一个有2%左右填充的容器中，我有两个div盒子。左div框的固定宽度为200 box，固定的边距为60 box。我希望右div调整其宽度越小/越大的浏览器窗口得到。如何实现红色框的宽度总是(独立于浏览器宽度)填满，直到容器的严格填充开始，而蓝色div保持其200 box？

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

这在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>

​