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: 5/10

Topics: overflow handling, replaced elements, CSS layout

Scenario Questions

0-2 years experience

1
You place an <img> that’s 1200 px wide inside a 300 px‑wide div with overflow: hidden. What does the user see and why?
2
If you add overflow: scroll to a <video> element, will scrollbars appear? Explain the browser’s behavior.
3
How would you crop an oversized image without stretching it, using only CSS?

2-5 years experience

1
A card component sets its image to width:100% but the image’s intrinsic size is larger, and extra whitespace sometimes shows up. Why isn’t overflow being clipped?
2
A teammate added overflow:auto to a <video> to let users scroll inside the video frame, but nothing happens. What’s wrong and how would you fix it?
3
When deciding between object-fit: cover and setting the container’s overflow to hidden for large images, what trade‑offs should you consider?

5-8 years experience

1
Design a photo‑gallery widget that lazily loads high‑resolution images and must allow users to pan inside each image on desktop browsers. How do you handle overflow given browsers ignore overflow on <img>?
2
You need a custom video player where users can scroll to view hidden portions of a 4K video in a smaller viewport. What architecture would you use to achieve this despite overflow being ignored on <video>?
3
Discuss the performance impact of wrapping replaced elements in extra containers to control overflow versus using CSS transforms or clipping paths.

8+ years experience

1
Our legacy app relies on overflow: scroll on many <img> tags to let users pan large diagrams. We’re migrating to a component library and need a consistent, future‑proof solution. What architectural changes would you propose?
2
Multiple teams have divergent patterns for handling overflow on replaced elements, causing UI regressions. How would you establish a cross‑team guideline or abstraction to manage this at scale?
3
When planning a long‑term migration to Web Components, how would you encapsulate overflow behavior for replaced elements to avoid browser inconsistencies and simplify maintenance?

Follow-up Questions

❓What happens if you set overflow: scroll on an <img>?
❓Can you make a replaced element scrollable without wrapping it?
❓How does object-fit interact with overflow clipping?