CODEWITHSUNDEEP
css
Simon LeVasseur
Simon LeVasseur

Reputation: 422

Display table is exceeding parent height in every browser but Chrome

I'm trying to stack 2 divs of variable height one on top of the other. Both divs combined should not exceed the container height. The 2nd div should allow scrolling if it gets too big.

I've done some research on how to make a div take the remaining height and it pointed me towards display: table-row. I can't use absolute positioning because I don't know what the height of the 1st div will be as it is also variable.

The problem appears to be that the table will always expand vertically with the content unless I use a fixed height on one of the divs.

Here's a JSBin of the problem: http://jsbin.com/heyam/3/edit?html,css,output

It works fine in Chrome but doesn't work in any other browser. I've read dozens of threads on SO with similar problems but none of the answers gave me a working solution. My browser support includes the latest versions of FF, Chrome, Safari and IE9+.

Is there a CSS-only solution to this problem or am I stuck using JS on this one?

Upvotes: 1

Views: 535

Answers (1)

alessandrio
alessandrio

Reputation: 4370

.slideout {
    display: table;
    float:right;
    width: 200px;
    height: 100%;
    background: blue;
}

Upvotes: 1

Related Questions