Jquery 具有堆叠div的流动布局

我正试图建立一个有两个栏目的网站。左栏有两个div，右栏有四个div。每个div可以有任何高度。垂直滚动条不应出现在主体上；仅在任一列中的单个div上。每个div应尽可能小，不滚动，直到它们占据其列中的所有垂直空间。在这种情况下，内容最多的div首先开始滚动，内容第二多的div第二次开始滚动，以此类推

CSS布局将是理想的，但jQuery也非常有效

编辑

---

我希望它能做这样的事情：。（垂直调整窗口大小以获得想法。）我现在有了一个Javascript解决方案，即。。。比我想象的要复杂。请随意说出任何不好的做法、代码气味等——我对web开发还是新手。

可能忽略了这一点，但div是垂直堆叠的。使用此解决方案，单个div不会滚动，只会溢出列的高度。您应该真正改进您的答案@watson。

body {
  overflow: hidden;
}

div.columns {
  width: 50%;
  float: left;
  overflow: hidden;
}

div.inside {
}