Html 固定宽度的Div和相邻的灵活宽度的Div

在一个有2%左右填充的容器中，我有两个div框。左侧div框的固定宽度为200px，右侧的固定边距为60px。我希望正确的div可以根据浏览器窗口的大小调整其宽度。如何实现红色框的宽度始终（与浏览器宽度无关）填充，直到容器的右填充开始，而蓝色div保持其200px

JSFIDDLE：

HTML:

---

使用

calc

从100%宽度中删除固定宽度和边距宽度

#容器{
浮动：左；
宽度：100%；
填充：50px；
背景：浅灰色；
}
#固定宽度{
浮动：左；
宽度：200px；
高度：500px；
右边距：60px；
背景：蓝色；
}
#柔性宽度{
浮动：左；
最大宽度：500px；
/*我的目标是，宽度始终与浏览器宽度无关*/
宽度：计算（100%-260px）；/*使用计算从100%宽度中删除固定宽度和边距宽度*/
高度：500px；
背景：红色；
}

---

这可以通过以下方式轻松实现：

当响应元素用

flex grow

填充剩余空间时：

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

请注意，我删除了所有的

浮动

，因为在本例中没有必要这样做

#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;
}

#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 */
}

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