How do browsers handle overflow differently for replaced elements (like <img>, <video>)?

Overflow behavior in replaced elements like images and videos

Replaced elements such as <img>, <video>, or <iframe> have their own intrinsic dimensions and are handled differently by browsers when it comes to overflow. These elements do not generate inner scrollable content—overflow applies only to how their outer box is clipped or constrained.

Key Behaviors

Replaced elements do not create scrollable overflow regions, even if overflow: auto or overflow: scroll is applied.
When a replaced element’s content (like a video frame or image) exceeds its container, it is clipped based on the container’s overflow value.
Using object-fit or object-position can control how replaced content fits within its box rather than relying on overflow.
overflow on replaced elements themselves is generally ignored because their internal content is rendered externally by the browser or plugin (not in the normal box tree).

Example: Overflow with an Image Container

Question Loading...

Transformation and Transition

Frameworks

Everything else

How do browsers handle overflow differently for replaced elements (like <img>, <video>)?

Overflow behavior in replaced elements like images and videos

Key Behaviors

Replaced elements do not create scrollable overflow regions, even if overflow: auto or overflow: scroll is applied.
When a replaced element’s content (like a video frame or image) exceeds its container, it is clipped based on the container’s overflow value.
Using object-fit or object-position can control how replaced content fits within its box rather than relying on overflow.
overflow on replaced elements themselves is generally ignored because their internal content is rendered externally by the browser or plugin (not in the normal box tree).

Example: Overflow with an Image Container