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具有滚动。

DEMO

http://jsfiddle.net/QtyNU/

Answer 1

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

jsFiddle

.PopInfo {
    overflow: auto;
}

Answer 2

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

即可

overflow: scroll;

到父CSS。请参阅this fiddle。

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

2 个答案: