Can overflow:hidden affect layout?

by

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.

More Related Contents:

  1. Position absolute and overflow hidden
  2. What is a clearfix?
  3. How to center an element horizontally and vertically
  4. CSS margin terror; Margin adds space outside parent element [duplicate]
  5. How do you keep parents of floated elements from collapsing? [duplicate]
  6. CSS: Width in percentage and Borders
  7. How can I expand floated child div’s height to parent’s height?
  8. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  9. Can specific text character change the line height?
  10. How to display scroll bar onto a html table
  11. CSS margin adds space outside parent element [duplicate]
  12. Fixed Table Cell Width
  13. CSS overflow:hidden with floats
  14. Transform: translate(-50%, -50%)
  15. IE6 + IE7 CSS problem with overflow: hidden; – position: relative; combo
  16. Get rid of space underneath inline-block image [duplicate]
  17. Difference between position:sticky and position:fixed?
  18. Can a span be closed using ?
  19. Flexbox affects overflow-wrap behavior
  20. How can I truncate table cells, but fit as much as content possible?
  21. Printing HTML table with many columns/rows using CSS layout?
  22. How to prevent text from overflowing in CSS?
  23. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  24. Generate scroll bar for overflow to the left
  25. How do I remove the horizontal scrollbar in a div?
  26. CSS Layout 2-Column fixed-fluid [closed]
  27. Yet Another Divs vs Tables issue: Forms
  28. Balanced text wrapping in HTML
  29. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content
  30. Is it bad design to use table tags when displaying forms in html?

Leave a Comment