html - Can overflow:hidden affect layout?

Question

There's no way for me to explain this except to refer to the following example on JS Fiddle- in it, the last BLUE box does not extend to 100% of the width as expected after I introduce an overflow:hidden attribute.

I was under the impression overflow:hidden would affect visibility aspects only, and not interfere with layout. Can someone explain what is going on in this example?

EDIT: This problem seems limited to webkit browsers (e.g. Chrome)

Answer 1

It is because overflow: hidden, among other properties, introduces a new block formatting context.

You can read about the effects in this great article: The magic of overflow: hidden

UPDATE: I've rewritten your jsFiddle into something that is working (tested on Chrome). Instead of defining margin-left on the #red and #blue (which would act differently due to overflow: hidden), I've put a margin-right on #yellow.