Why using CSS units like em can lead to overflow ?

Yes, that can definitely happen — let me explain why 👇

🧠 What `em` really means

1em = the font size of the element (or its parent).
So em is relative, not absolute like px.
This means its actual value depends on context — i.e., where you use it.

⚠️ Why `em` can cause overflow

There are 3 main reasons:

1. Nested scaling effect

Each nested element inherits and multiplies the em value.


body {
  font-size: 16px;
}
.container {
  font-size: 2em; /* 2 × 16px = 32px */
}
.box {
  width: 10em; /* 10 × 32px = 320px */
}

Even though you might expect 10em = 160px,
it actually becomes 320px because it’s relative to .container, not body.

👉 If you keep nesting elements using em, it quickly becomes bigger than expected, causing overflow.

2. Font-size scaling increases box size

If you use em for layout properties (like width, padding, or margin) and also increase font-size, those properties scale up too.

Example:


.card {
  font-size: 20px;
  width: 10em; /* 200px */
}

But if someone later changes:


.card {
  font-size: 30px;
}

Then width: 10em → 300px, and the element might now overflow its container.

3. Combining `em` with limited parent space

If the parent has a fixed width (e.g., 200px) but your child uses em based on a large font-size:


.parent {
  width: 200px;
  font-size: 20px;
}
.child {
  width: 15em; /* 15 × 20px = 300px > parent width */
}

💥 Boom — overflow! The child is wider than the parent.

💡 How to avoid overflow

✅ Use rem (root em) for consistent sizing
1rem = font size of root <html> (usually 16px). It doesn’t multiply inside nested elements.

✅ Use percentage (%) for width if you want it to fit the parent.

✅ Use max-width: 100% to prevent elements from exceeding their container.

✅ Be careful mixing font scaling (em) with fixed container sizes.

When you use a value like width: 5em; (or font-size: 5em;, padding: 5em;, etc.), the em unit is relative to the font size of the element (or its parent).

So:

1em = current font size
5em = 5 × current font size

For example:


div {
  font-size: 16px;
  width: 5em; /* 5 × 16px = 80px */
}

✅ No overflow if the parent container is large enough.

But if your parent element has a small container width, or if the em unit grows too large (say font-size is 20px, so 5em = 100px), then:

The box may become wider than its parent, or
Text may overflow horizontally (especially if you also have padding/margin in em units).

Common reasons overflow happens with `em`

The element’s parent has a small width (e.g., inside a flexbox or grid cell).
The element’s font-size is large, so 5em becomes a large pixel value.
Padding or margin is also in em — making the box even bigger.
You didn’t use overflow: hidden or text-overflow: ellipsis to control it.

How to fix it

You can try:


width: 100%;       /* fits parent */
max-width: 100%;   /* prevent overflow */
overflow: hidden;  /* clip extra content */

Or, use relative units like rem, %, or vw depending on your design.

Computer Science

Search This Blog