CODEWITHSUNDEEP
csshtmllayout
Tom
Tom

Reputation: 224

Prevent child elements overflowing max-height of parent

I'm trying to produce a layout where I have a div with a percentage height of the body. In addition, I also want to limit this height using max-height.

Inside the parent, I want to create some columns that have further sub-elements, all of which fit within the height (or max-height) of the parent.

Please see this example: http://jsfiddle.net/k6rfr/2/

The problem is that the child elements (with a height of 50% each), match the height of the parent and not the max-height.

Is there any way to make the child elements match the max-height instead of the height?

Upvotes: 1

Views: 3432

Answers (2)

Christoph
Christoph

Reputation: 51201

Though this is not exactly what you might need, it solves your problem:

http://jsfiddle.net/k6rfr/3/

I placed the max-height directy in the child-elements omiting the second wrapper element. The problem you have here is that you have to define the height in two different places.

Upvotes: 1

Xella
Xella

Reputation: 1268

I think the error is that a given block "outer" height of 60% may not correspond to what you wrote after 300px. It's not correct. If you remove a specified percentage of the height, the blocks would fall into place. Or enter the correct proportion height and max-height.

Upvotes: 0

Related Questions