Adding overflow-y to block element causes width to decrease.

问题

This is what I have, I have left div, and a right div. The left div is a fixed width, and floated left. The right Div is a "display: block" to make it full width, and has a margin on the left to compensate for the left div. Both of the boxes have a fixed height, and need to be scrollable (the contents inside). I add an overflow-y to the Left div successfully. However when I add overflow-y: auto to the right div, the div no longer spans the whole div.

Before adding Overflow: http://jsbin.com/asecuy/

After adding Overflow: http://jsbin.com/asecuy/2

回答1:

You need to unset

.eventdetails {
    margin-left: 252px;
}

This margin is causing the bug. I'm guessing it just doesn't play nice together with overflow-y and the float next to it (should work though I think).

Here it is working:

http://jsbin.com/asecuy/3/#html

来源：https://stackoverflow.com/questions/7504896/adding-overflow-y-to-block-element-causes-width-to-decrease