css - Firefox+IE10。インラインブロックを強制して、その内側のフロート+オーバーフロー：非表示のdivの全幅を尊重する方法は？

Question

30.04.13に編集：IE10は記述された動作を取り除いたようで、この動作を現在監視できる唯一のブラウザーはFirefoxです。

1つのdiv(.side)をinline-blockのすぐ内側にフロートさせ(.wrap)、別のdiv(.content)にtext-overflow（オーバーフローの場合は省略記号）を含む長い非折り返し文字列を含める必要があります。また.wrap、コンテナよりも幅が広くないようにする必要があるため、最大幅は100％です。

のコンテンツの幅と.content組み合わせたコンテンツの幅が、 -.sideのコンテナよりも広くなるのに十分な幅がある場合、コンテンツはオーバーフローする必要があります。.wrap.content

そして、コンテンツの幅との.content組み合わせ.sideがaのコンテナの幅よりも小さい場合、の.wrapオーバーフローは発生しないはずです。ただの幅を取り、組み合わせてください。そう思われますが、FirefoxとIE10ではそうではありません。この2つのブラウザでは、の幅は最も広い内部divと同じです。しかし、私はそれがとの両方の幅を尊重することを期待していました。.content.wrap.content.side.wrap.wrap.side.content

この動作はここで確認できます：http：//jsbin.com/evamik/1/、ブラウザウィンドウを十分に広くすると、ライム色のdivにテキストオーバーフローがあることがわかります(.content)。オーバーフローをオフにすると、非表示になり.contentますが、その幅はaの幅に.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/