如何使元素拉伸到与其容器相同的高度？

Question

当无法指定高度时，如果div大于其容器时如何使div溢出？

先决条件：

• .Wrap的高度可变，无法设置height。
• .Head应该是一个固定的高度。
当
• .Body的高度大于它时，它应该变成可滚动的 容器（.Wrap）

此处的计划是.Body伸展以适应.Wrap，导致overflow触发。

CURRENT CSS

.Wrap{
    position:fixed;
    top:10%;
    left:10%;
    display:flex wrap;
    align-items:stretch;
    max-height:50%;
    max-width:50%;
    overflow:hidden;
}
.Head{
    height:50px;
    width:100%;
}
.Body{
    overflow:auto;
}

http://jsfiddle.net/x6TaR/2

Answer 1

您可以尝试为min-height指定.Head（以防止Flexbox强行折叠它），并将父.Wrap元素的flex-flow属性设置为{{1} }：

column nowrap

http://jsfiddle.net/x6TaR/6/

Answer 2

身体应该有一定的高度。请检查此fiddle。

.Body{
    background:#555;
    overflow:auto;
    height: 150px;
}