如果你不需要兼容某些浏览器的旧版本(例如IE 10 8或更低版本)，你可以使用calc() CSS函数:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

尝试添加相对位置，删除右边的宽度和浮动属性，然后添加0值的左和右属性。

此外，您还可以添加左距规则，其值基于左元素的宽度(如果您需要在两者之间留出空间，则要加上一些像素)来保持其位置。

这个例子对我来说很有用:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

如果您试图填充flexbox中2项之间的剩余空间，请将以下类添加到您想要分离的2项之间的空div:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

解决方案来自display属性。

基本上你需要让两个div像表格单元一样。所以不是使用float:left，你必须在两个div上使用display:table-cell，对于动态宽度div，你需要设置width:auto;也。这两个div都应该放在一个100%宽度的容器中，并使用display:table属性。

下面是css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

而HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

重要提示:对于Internet Explorer，您需要在动态宽度div上指定float属性，否则空间将不会被填充。

我希望这能解决你的问题。 如果你愿意，你可以在我的博客上阅读关于这一点的完整文章。

我尝试了上面的解决方案，左边是液体，右边是固定的，但它们都不起作用(我知道这个问题是相反的，但我认为这是相关的)。以下是行之有效的方法:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

您可以使用网格CSS属性，是最清晰，干净和直观的方式结构您的盒子。

#{容器 显示:网格; Grid-template-columns: 100px auto; 颜色:白色; ｝ #{固定 背景:红色; grid-column: 1; ｝ 剩余# { 背景:绿色; grid-column: 2; ｝ < div id = "容器" > < div id = "固定" > < / div >固定 剩余< div id = "剩余" > < / div > < / div >