问火狐+ IE10。如何强制内联块尊重其内部float+overflow:hidden div的全宽度？

EN

在30.04.13上编辑的：IE10似乎摆脱了描述的行为，我们现在能看到这种行为的唯一浏览器是火狐

我希望一个div (.side)就在内联块(.wrap)中浮动，我希望另一个div (.content)包含带有文本溢出的长非包装字符串:在溢出的情况下省略。另外，.wrap不应该比它的容器更宽，所以它有最大宽度: 100%.

当.content中的内容宽度加上.side的宽度足够宽到比.wrap容器更宽时，.content中的内容应该会溢出。

当.content中的内容宽度加上.side的宽度小于.wrap容器的宽度时，则.content中不存在溢出，.wrap只应取.content和.side之和的宽度。似乎是这样，但在火狐和IE10中并非如此。在这两个浏览器中，.wrap的宽度与最宽的内部div一样宽。但我预计.wrap会尊重.side和.content的宽度。

您可以在这里看到这种行为：http://jsbin.com/evamik/1/，只要使浏览器窗口足够宽，您就会看到石灰色div (.content)中存在文本溢出。如果要关闭.content上隐藏的溢出:您将看到，.wrap的宽度等于.content的宽度，而.side的宽度则被忽略。

那么如何强制.wrap同时尊重.side和.content的宽度？

HTML：

  <div class="wrap">
    <div class="side">
       side
    </div>
    <div class="content">
       nonwrappnonwrappingnonwrappingnonwrappingnonwrapping
    </div>
    <div class="clear"></div>
  </div>

CSS：

.wrap {
  background: lime;
  display: inline-block;
  max-width: 100%;
}
.side {
  float: right;
  background: orange;
}
.content {
  overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}  
.clear {
  clear: both;
}

示例url：http://jsbin.com/evamik/1/