html - 动态高度父div和不听话的 child

Question

如何防止子div的高度溢出父div？

我的 div 在我的整个网站上重复使用，内容可变。我知道为 parent 设置高度值可以解决这个问题，但我不想这样做，因为有时它非常小。

我在这里查看了许多与此问题相关的问题，但找不到适合我的问题的解决方案。

.Parent{
    background: #eee;
    position: relative;
    max-height: 80%;
    max-width: 80%;
    text-align: center;
    vertical-align: middle;
    margin: auto;
    padding: 5px;
    display: inline-block;
}
.Child{
    overflow: auto;
}

期望的结果

父 div 的高度等于其内容。

如果父 div 超过 80% 的最大高度，子 div 将滚动。

演示

http://jsfiddle.net/QtyNU/

Answer 1

您可以在.PopInfo 上设置overflow:auto。这将使滚动条在不适合时出现在右侧。

jsFiddle

.PopInfo {
    overflow: auto;
}