列布局，其中一列填充宽度，另一列填充溢出

Question

如何制作包含多列的布局，其中一列占据剩余的水平空间，另一列与其内容一样宽或更小，其余列与其内容一样宽？

这应该是这样的：

-----------------------------------------------------------------------------------------
|As wide as content | May shrink | Fill up remaining width          | As wide as content| 
-----------------------------------------------------------------------------------------

整个事情也应该填满整个宽度！

我尝试了以下内容：

HTML：

<div class='container'>
  <div></div>
  <div class='mayShrink'></div>
  <div class='fillUp'></div>
  <div></div>
</div>

CSS：

div { 
  white-space: nowrap;
}
.container {
  display: block;
  width: 100%;
}
.mayShrink {
  overflow:hidden;
}
.fillUp {
  width: 100%;
}

需要支持IE8。 有人可以帮忙吗？