CSS · Layout and visual systems
What are common CSS layout bugs and how do you debug them?
Short answer
Common bugs come from margin collapsing, flex items not shrinking, percentage heights without a definite parent, stacking contexts, overflow and sticky ancestors. Debug by inspecting computed values and formatting contexts.
Most layout bugs are the browser correctly applying a rule you did not intend. Before changing values, identify the formatting context, the containing block and the computed size of the box you are debugging.
.flex-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sticky {
position: sticky;
top: 0;
align-self: flex-start;
}The usual suspects
- Vertical margins collapse, so the gap is smaller than expected
- A flex or grid item refuses to shrink because min-width or min-height is auto
- height: 100% does nothing because an ancestor height is auto
- z-index appears ignored because an ancestor created a stacking context
- overflow-x: hidden on one axis changes the other axis to auto
- position: sticky fails because an ancestor scrolls or hides overflow
- Inline elements ignore width and height, and whitespace creates gaps between inline-blocks
- 100vh on mobile is taller than the visible viewport
DevTools is the fastest path: inspect the box model, computed styles, the containing block and the ancestors' overflow and position values. Toggling outline on every element can reveal boxes that are present but invisible.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Why does a flex item overflow instead of shrinking?
- 2Why does height: 100% fail?
- 3Why does position: sticky stop working inside an overflow container?
- 4How do you debug a z-index problem?
Say it in the interview
Most CSS layout bugs are expected behaviour from margin collapsing, containing blocks, formatting contexts or automatic minimum sizes. I debug by inspecting computed values and ancestors instead of guessing. Common fixes are min-width zero on flex children, a definite parent height or a flex parent, flow-root for margins, and checking overflow and transform on sticky ancestors. I avoid masking the issue with important or huge z-index values.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live CSS mock interview and get scored feedback on depth, clarity and confidence.