0
我正在使用基於表格的佈局（使用display: table屬性）。容器有一個動態高度（我已經在容器上設置了最小和最大高度屬性）。容器內的所有內部元素都將其高度設置爲100％。這個想法是，他們將永遠填補可用空間。CSS - 防止表格單元超出最大高度擴展容器
我遇到的問題是，display: table-cell的元素將繼續擴展到100％以上的分配空間，如果它們包含的內容比它們高。即使我設置了overflow: auto，也會發生這種情況。
我已經創建了一個jsfiddle來演示這個問題。請在這裏看到：
在這個例子中，容器的最大高度爲300像素，但內部元件稱爲.tall-content具有400像素的高度。這使得容器比其最大高度增長得更高。
在Chrome中，這實際上是我想要的。但是它在Firefox或IE中不起作用。
請注意，由於容器高度是動態的，因此我無法在任何內部元素上設置固定高度（除非可以使用jQuery爲文檔加載和窗口大小調整分配正確的高度，但這需要考慮容器的最小和最大高度設置）。
有沒有人有任何想法我可以如何實現預期的結果？我希望儘可能多地保留現有的結構，但如果能夠以相同的結果以稍微不同的方式實現，那麼我對此持開放態度。無論哪種方式，它需要在所有瀏覽器中都一樣。