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 (eg Chrome)
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
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.