html - 如何使元素拉伸(stretch)到与其容器相同的高度？

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

先决条件：


.Wrap的高度可变，不能设置height。
.Head应为固定高度。
.Body高度大于其高度时应可滚动
容器（.Wrap）


这里的计划是使.Body拉伸以适合.Wrap引起overflow触发。

当前的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

最佳答案

您可以尝试为min-height指定一个.Head（以防止flexbox强行折叠），并将父.Wrap元素的flex-flow属性设置为column nowrap：

.Wrap{
    position:fixed;
    top:10%;
    left:10%;
    display:flex;
    flex-flow: column nowrap;
    align-items:stretch;
    background:#ddd;
    max-height:50%;
    max-width:50%;
    padding:10px;
    overflow:hidden;
}
.Head{
    background:#e00;
    height:50px;
    min-height: 50px;
    width:100%;
}

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