css-float - 浮动 div 和灵活的高度

Question

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

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

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

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

和父母overflow: hidden;

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

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

适合我的解决方案：

新布局测试

Answer 1

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

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

Answer 2

用我自己的解决方案更新，有问题的链接。