Overflow: hidden, overflowhidden

Overflow: hidden, overflowhidden

I thought that overflow: hidden could hide all the child elements that overflow, but today I found it wrong.

The biggest misunderstanding of overflow: hidden:When overflow: hidden is applied to a container with at least one of the heights and widths, any overflow content inside the container will be cropped (hidden ).

In addition, the following conditions are invalid:

Here is an online explanation of the css2.1 specification of overflow:

Original

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

Translation

This attribute specifies whether to crop a block element container when its content overflows the boundary of the box model. This attribute affects the tailoring of all content of the applied element. However, if the descendant element'sContained blockIt is not affected when the entire view area (usually the visible area of the browser content, which can be understood as the body element) or the parent element of the container (which defines the overflow element.

 

Everyone is familiar with "included blocks:

An absolute positioning element. Its contained block is the closest ancestor element with the relative or absolute positioning attribute. If any level-1 ancestor element does not match, the contained block is the body element.

This shows that whether an absolutely positioned element is hidden by overflow: hidden depends on the position of its contained block relative to overflow: hidden.

In section 11.1 of the css2.1 specification, there are more specific instructions:

Original

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。

Translation

An absolute position of the Child block element, part of which is located outside the container. Whether or not such elements are cropped does not always depend on the ancestor container that defines the overflow attribute.Ancestor container between themselves and their contained BlocksOverflow attribute pruning.

 

Therefore, overflow: hidden is not omnipotent. To completely crop all its sub-elements, it not only requires overflow: hidden, but also serves as the inclusion block of all sub-elements.