html - CSS - 防止表格单元扩展容器超过最大高度

我正在使用基于表格的布局（使用display: table属性）。容器具有动态高度（我在容器上设置了最小和最大高度属性）。容器内的所有内部元素的高度设置为100％。这个想法是他们将永远填补可用空间。

我遇到的问题是，display: table-cell的元素如果包含比它们高的内容，则会继续扩展到100％分配的空间之上。即使我设置了overflow: auto，也会发生这种情况。

我创建了一个jsfiddle来演示这个问题。请看这里：

在此示例中，容器的最大高度为300px，但名为.tall-content的内部元素的高度为400px。这使得容器长度高于其最大高度。

在Chrome中，这实际上是我想要的。但是它在Firefox或IE中不起作用。

请注意，由于容器高度是动态的，我无法在任何内部元素上设置固定高度（除非可以使用jQuery在文档加载时指定正确的高度并在窗口调整大小，但这需要尊重容器的最小和最大高度设置。

有谁知道我如何才能达到预期的效果？我想保留尽可能多的现有结构，但如果以稍微不同的方式实现相同的结果，那么我对此持开放态度。无论哪种方式，它都需要在所有浏览器中都能正常工作。