overflow — CSS Technical Interview Questions & Answers

Controlling content that doesn't fit its box.

overflow

  • Controlling content that doesn't fit its box.
  • overflow is a CSS property: it changes how a selected element looks or sits. You write it inside a rule: .card { overflow: …; }
  • Change one value, refresh, say what moved: colour, space, size, or stacking. That is how you learn properties — not by memorising the spec.
  • Trap: putting it on the wrong selector (parent vs child). Trap: px only on a phone page — learn rem/%/flex too when it is layout.
  • Box model reminder: width/height, padding, border, margin are different. If overflow is about space, draw the box.

Technical Interview Tip: overflow: one rule on .card, then say what changed.

Code Examples for overflow

overflow — working example

.panel {
  width: 240px;
  height: 120px;
  overflow: auto; /* scrollbars if needed */
}

.clip {
  overflow: hidden; /* crop overflowing content */
}

.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

overflow controls content that does not fit: visible, hidden, scroll, or auto.

How to Explain overflow to an Interviewer

What does overflow do?

A CSS property that changes look/layout Write it in a rule and refresh