Sekrab Garage

CSS overflow side effects

Breaking hidden overflow for positioned children

CSS December 1, 20
Subscribe to Sekrab Parts newsletter.

The rule is simple, if you have an element with overflow: hidden, and a child with position: absolute, in order to break free from the parent restriction, remove all position: relative from its way to the parent. Absolutely positioned elements ignore the overflow property.

Lesson learnt

In a project, setting the overflow on a div to hidden, no matter what I did, or thought I did, the original height of the element streched the body beyond its height. Turned out I was having a position: absolute checkbox, with opacity: 0. The solution was of course, to set the relative position to the scrolling element itself.

Image on Sekrab Garage