Q:

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/

A:

The problem is the display:table-cell;
Remove that and the fixed width will work.

