Html 在CSS中，如何根据内容自动调整三个容器的高度

我有三个动态添加内容的容器。基本上，我只希望这三行占据浏览器窗口的高度。但我希望它们根据内部内容自动调整大小

因此，如果它们都有相同数量的内容，则每个内容的高度约为33%，然后出现溢出：auto。或者，如果一个容器没有内容物，而另外两个容器有大量内容物，则没有内容物的容器的高度应为0，另外两个容器的高度应为50%

此外，没有必要支持IE——它是针对内部产品的，只使用chrome和firefox浏览器，所以如果有css3解决方案，那就没问题了

下面是一个我现在拥有的不起作用的我想要的例子：

HTML:

<div class="container">

    <div class="one">
     <!-- dynamically added content -->
    </div>

    <div class="two">
     <!-- dynamically added content -->
    </div>

     <div class="three">
     <!-- dynamically added content -->
    </div>

</div>

---

高度根据内容自动设置。你有一个最大高度设置，所以你永远不会得到50%的高度。容器元素是否需要表示一个大小，或者它是否可以随内容而改变？

基本上，高度需要是某种“神奇的值”，它是自动的、成比例的，不会给没有内容的容器留出空间。所以，是的，将高度设置为任何固定值都是错误的，但是如果我不设置高度，内容就会超出屏幕高度。如果没有办法，我需要使用JavaScript，那就这样吧。第三个div是没有内容的吗？你可以这样做。1，2{max height:50%；}.1，.2，.3{overflow:auto}所以当三个没有内容时，1和2会扩展到50%没有-它们中的任何一个都可能没有内容或大量。我不知道里面会有什么，因为内容是动态生成的。

.container {
  position: absolute;
  top: 0;
  bottom: 0;
}

.one,
.two,
.three {
  overflow: auto;
  max-height: 33%; 
}