阻止div导致父浮动扩展到100％

Question

我有一个右浮动的流体宽度div，它恰好位于另一个流体宽度的非浮动柱旁边。

一切正常，直到我将另一个流体宽度div放入右浮动柱中，此时它会扩展到100％并将非浮动柱放在其下方。我唯一可以解决这个问题的方法就是让div导致问题出现固定的像素宽度，但我不想这样做，因为它需要扩展到它的父浮点数，但不能超过它。以下是问题的一个示例：

    <div style="overflow:hidden;width:800px;">
    <div style="min-width:600px;min-height:200px;float:right;background:#FAA;">
    <div id="floatContent" style="max-width:88%;">Here's some long string of text that makes the width of the parent float expand out to 100% of *its* parent, rather than shrinking the content to its original width (100% minus the width of the non-floated element</div>
  </div>
    <div style="min-width:200px;min-height:200px;background:#CCC;">Some non-floated content</div>
</div>

有什么想法吗？非常感谢。

JSFiddle link