当右元素具有可变宽度时，如何设置左元素以使用其余部分的父元素宽度？

Question

我正在使用导航栏，其右侧部分的内容宽度会有所不同，然后我希望左侧部分占用剩余的空间。我发现display: inline-block;根据它的内容设置了元素宽度，但是我无法让左边的部分占用剩余的空间。

我发现了另一个问题，显示如果正确的部分是剩余部分（Set width to remainder of parent - dynamic width），如何做我想要的事情，并试图弄清楚如何使用这个概念反过来，但正确的部分结束了进入第二行。

最终我试图用聚合物核心工具栏来做这件事，但我甚至不能用一个非常简单的例子来解决这个问题。

HTML：

<div id="container">
  <div id="left">main</div>
  <div id="right">variable width content</div>
</div>

css（使用链接示例）：

#container {
  width: 100%;
  height: 32px;   
}
#left {
  overflow: hidden;
  height: 100%;
  background-color: blue;
}
#right {
  float: right;
  max-width: 25%;
  height: 100%;
  background-color: grey;
}

css（使用内联块）：

#container div{
  position: absolute;
  top: 0px;
  height: 32px;   
}
#left {
  left: 0px;
  background-color: blue;
}
#right {
  right: 0px;
  display: inline-block;
  background-color: grey;
}

Linked example fiddle

Inline-block fiddle

我不喜欢使用这些方法中的任何一种，这正是我在阅读几篇文章后一直在尝试的内容。