CODEWITHSUNDEEP
htmlcssfluid-layoutstretch
DreamTeK
DreamTeK

Reputation: 34207

How to make an element stretch to the same height as its container?

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

Prerequisites:

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

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

Upvotes: 0

Views: 146

Answers (2)

Terry
Terry

Reputation: 66123

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:

.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/

Upvotes: 1

qtgye
qtgye

Reputation: 3610

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

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

Upvotes: 0

Related Questions