浮动div和灵活的高度

Question

也许以前已经回答过，但是找不到真正有用的答案，所以这里有：

我有这个布局layout test，我需要橙色框与绿色相同的高度，这将具有动态内容。

我尝试了不同的解决方案，但没有得到正确的结果。一个解决方案是让橙色和绿色框具有：

padding-bottom: 500em;
margin: -500em;

和父overflow: hidden;

但问题始于红色框底部（漂浮在紫色顶部）因overflow: hidden;而被切断

有人有解决方案或想法吗？如果可能的话，我更喜欢纯CSS。

适合我的解决方案：

New layout test

Answer 1

抱歉，我找不到纯CSS的解决方案，但是使用这个简单的jquery，你可能会得到所需的结果：

jQuery(document).ready(function( $ ){   
var green = $('.col3').height();
var red = $('.col1').height();
    $('.col2').height(green - red + 15);
});

Answer 2

使用我自己的解决方案更新了相关链接。