When overflow occurs:
1. The inline element does not wrap and the content exceeds the outer boundary of the containing block.
2. The width and height of the block element exceed the outer boundary of the containing block.
Why does overflow:hidden fail?
In most cases, the position:absolute positioning attribute is set for the current element, which leads to the departure from the document flow, and the current element is no longer constrained by the containing block.
Solution:
Set position: relative to the containing block; let the containing block regain jurisdiction