For those who want some background info, here's a short article explaining why overflow: hidden
works. It has to do with the so-called block formatting context. This is part of W3C's spec (ie is not a hack) and is basically the region occupied by an element with a block-type flow.
Every time it is applied, overflow: hidden
creates a new block formatting context. But it's not the only property capable of triggering that behaviour. Quoting a presentation by Fiona Chan from Sydney Web Apps Group:
- float: left / right
- overflow: hidden / auto / scroll
- display: table-cell and any table-related values / inline-block
- position: absolute / fixed