CSS - 在浮动元素旁边填充剩余宽度并保持内容不会落在浮动元素下方？

Question

我遇到的问题是我需要浮动一个固定宽度的元素到左边，并在它旁边有一个元素填充剩余的宽度。

，我知道的唯一解决办法是漂浮在第一元件，然后将该元件旁边它会自动填充剩余的宽度。我遇到的问题如下：

http://codepen.io/anon/pen/udBsx

如果绿色含量比红色高，它会跳下红下方。有什么办法可以防止这种情况发生？我玩过clear，但我不认为有什么我可以做，以防止它发生。

为了让它更糟，该网站是响应式的。如果不是这样，我可以给绿色元素一个静态宽度并将其浮动，但事实并非如此。我无法使用百分比，因为红色元素有一个静态宽度。

我相信flexbox有我在找的东西，但不幸的是，由于缺乏支持，它现在不是一个选项。

想法？

Answer 1

编辑：

CSS代码应该是这样的：

.floated { 
    width:200px; float:left; 
} 

.fill { 
    margin-left:200px; 
} 

的[展开div来当浮子最大宽度：左设置]