Sekrab Garage

CSS overflow side effects

Breaking hidden overflow for positioned children

CSS December 1, 20

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