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

Question

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

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

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

.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

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

jsFiddle

.PopInfo {
    overflow: auto;
}

Answer 2

从我在你的小提琴中看到的，问题是max-height: 80%规则。父 div 正确扩展至此。如果你想在那之后滚动，你只需要添加

overflow: scroll;

到父 CSS。看到这个小提琴。