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

How to make a div overflow when it is larger than its container when height cannot be specified?

当高度不能指定高度时,如何使div大于其容器?

Prerequisites:

.Wrap is variable in height and cannot have a set height.

.Wrap的高度可变,不能设置高度。

.Head should be a fixed height.

。头部应该是一个固定的高度。

.Body should become sccrollable when it is larger in height than its container (.Wrap)

当身高大于容器时,身体应该变成可伸缩的(.Wrap)

The plan here is to make .Body stretch to fit .Wrap causing overflow to trigger.

这里的计划是使.Body拉伸以适应。包裹导致溢出触发。

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

2 个解决方案

#1

You can try specifying a min-height for .Head (to prevent flexbox from forcibly collapsing it), and set the flex-flow property of the parent .Wrap element to column nowrap:

您可以尝试为.Head指定最小高度(以防止flexbox强行折叠它),并将父.Wrap元素的flex-flow属性设置为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/

#2

The body should have a definite height. Check this fiddle.

身体应该有一定的高度。检查这个小提琴。

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

#1