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

1
Replaced elements do not create scrollable overflow regions, even if overflow: auto or overflow: scroll is applied.
2
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.
3
Using object-fit or object-position can control how replaced content fits within its box rather than relying on overflow.
4
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

Difficulty: 6/10

Topics: replaced elements, overflow behavior, CSS box model

Scenario Questions

0-2 years experience

1
If you have an image inside a div with width: 200px and overflow: hidden, but the image is 400px wide, what will the user see?
2
You're given a video element inside a small card component, and it's spilling out the bottom — how would you fix it using CSS without changing the HTML?

2-5 years experience

1
A user reports that images in our feed grid sometimes overflow their cards on mobile, but only on Safari — what could be causing this, and how would you investigate?
2
We’re building a responsive image gallery where images need to scale down but never stretch — some are breaking layout when the container shrinks. How do you ensure replaced elements respect their aspect ratio and container bounds?

5-8 years experience

1
Our media component library has inconsistent overflow behavior across browsers — images behave differently than videos in constrained containers. How would you design a unified, predictable system that works across all modern browsers and edge cases like lazy-loaded placeholders?
2
When embedding third-party video players (like YouTube) in a scrollable modal, overflow clipping sometimes breaks controls. How would you architect a solution that preserves interactivity while maintaining layout integrity?

8+ years experience

1
We’re migrating a legacy CMS that embeds hundreds of uncontrolled media elements into responsive layouts — many overflow unpredictably. How would you design a system-wide CSS strategy that minimizes breakage, supports backward compatibility, and scales to thousands of legacy assets without manual fixes?
2
As a principal engineer, you’re deciding whether to enforce a strict overflow policy for all replaced elements company-wide. What are the long-term maintenance, performance, and accessibility tradeoffs of enforcing CSS containment vs. allowing flexible overflow behavior?

Follow-up Questions

❓Have you ever seen an image break out of its container unexpectedly?
❓How would you debug if a video player overflowed its parent in a mobile layout?
❓What happens if you set max-width: 100% on an image inside a flex container?