我想知道为什么没有人把position: absolute和position: relative放在一起使用

所以，另一个解决方案是:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Jsfiddle例子

解决方案来自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属性，否则空间将不会被填充。

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

Boushley的答案似乎是使用浮动来安排这一过程的最佳方法。然而，它也不是没有问题。展开元素中的嵌套浮动将不可用;它会破坏页面。

当涉及到扩展元素时，所显示的方法基本上是“伪造”的——它实际上并不是浮动的，它只是使用其边缘来处理固定宽度的浮动元素。

问题就在于:展开的元素不是浮动的。如果你尝试在展开元素中有任何嵌套的浮动，这些“嵌套的”浮动项根本就不是嵌套的;当你试图坚持明确:两者;在“嵌套”浮动项下，最终也会清除顶级浮动。

然后，为了使用Boushley的解决方案，我想添加一个div，如下所示: .fakeFloat ｛ 高度:100%; 宽度:100%; 浮:左; ｝ 并将其直接放置在展开的div中;所有展开的div的内容都应该在这个fakfloat元素中。

出于这个原因，我建议在这种特定情况下使用表。浮动元素实际上并不是为执行您想要的展开而设计的，而使用表的解决方案则是微不足道的。有一种说法是，浮动更适合布局，而不是表格。但无论如何，你并没有在这里使用float，你是在假装它——在我看来，这在某种程度上违背了这种特定情况下风格论证的目的。

最简单的解决方案是让左边div的宽度等于100% -右边div的宽度加上它们之间的任何边距。

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

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

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

由于这是一个相当流行的问题，我倾向于分享一个使用BFC的很好的解决方案。 代码样例如下。

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

在这种情况下，overflow: auto触发上下文行为，并使右元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽度。对于许多UI布局来说，这是一个非常有用和干净的技巧，但一开始可能很难理解“为什么它有效”。