CSS - 填充浮动元素旁边的剩余宽度并防止内容落在浮动元素下方？

Question

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

我知道的唯一解决方案是浮动第一个元素，然后它旁边的元素将自动填充剩余的宽度。我遇到的问题如下：

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

如果绿色内容高于红色，则会跳到红色下方。有什么办法可以防止这种情况发生吗？我玩过clear，但我认为我无法阻止它发生。

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

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

想法？

Answer 1

编辑：

css 代码应如下所示：

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

.fill {
  margin-left:200px;
}