Menu
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)
782
hidden - The overflow is clipped, and the rest of the content will be invisible. scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content. auto - Similar to scroll , but it adds scrollbars only when necessary.
Bad idea. It hides real content potentially, and will eventually create problems with readability and responsivity, it allows for images and text leaving the viewport halfways and is in general bad for accessibility. It won't adapt well on tiny screens.
The hidden value of the overflow property hides all the content that is exceeding the box area. This property should be handled with care because the content that this property hide is completely invisible to the user, however, it is best suited for displaying content that is dynamic in nature.
You can do this by setting the child to be position: absolute. Usually, this should work: overflow: hidden doesn't clip absolutely positioned descendants unless the same container doesn't have position:relative (see cssmojo.com/clearfix-reloaded-overflowhidden-demystified).
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.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
