CODEWITHSUNDEEP
csshtml
aaazalea
aaazalea

Reputation: 7920

Force div not to expand

I have a div set to a width of 60%. I want to have another div of significantly larger width (much of which will not be displayed) nested in it. However, whenever I have the child div increase its size beyond that of the parent, the parent expands to the larger size, even though its overflow-x is set to hidden. What can I do to fix this?

#parent{
    overflow-y: hidden;
    overflow-x: hidden;
    max-width:60%;
    width:60%;
    display:table-cell;
    border-radius:5px;
    background:#444;
    border-width:10px;
    color:lightgray;
    height:100%;
    padding:1em;
    vertical-align:top;
}
#child{
    width:2000px;
    height:100%;
}

Fiddle link: http://jsfiddle.net/kgsD7/

Upvotes: 0

Views: 948

Answers (2)

Kevin Lynch
Kevin Lynch

Reputation: 24713

Put table-layout:fixed instead of display:table-cell

Upvotes: 1

user1721135
user1721135

Reputation: 7092

The problem is the display:table-cell;

Remove that and the fixed width will work.

Upvotes: 5

Related Questions