CSS Debugging & DevTools

Master the browser DevTools layout overlays and learn to fix the three most common CSS bugs instantly.

CSS6 min readConcept 43 of 43

Visualizing the invisible

CSS layout algorithms (like Grid and Flexbox) happen invisibly. When a layout breaks, guessing which property to change is a recipe for frustration.

Modern browser DevTools include powerful layout overlays. By clicking the small flex or grid badge next to an element in the DOM tree, the browser draws an overlay on the screen revealing the exact boundaries of every track, gap, and line.

The three classic CSS bugs

Beyond using DevTools, mastering CSS means recognizing the common 'gotcha' bugs that plague every codebase. The three most common are:

1. **Flex child text overflow**: A child in a flex row refuses to shrink and text-truncate, blowing out the width of the page.

2. **Z-index wars**: An element with z-index: 9999 is somehow still appearing behind an element with z-index: 1.

3. **Margin collapsing**: A child element's top margin pushes its parent down, instead of pushing itself away from the parent.

The one-line fixes

**Flex Overflow**: Flex items default to min-width: auto. Change it to min-width: 0 on the child. This allows it to shrink below its content size, allowing text-overflow: ellipsis to work.

**Z-index Wars**: Z-index only works within a stacking context. To reset the stacking context and trap z-indexes inside a parent, apply isolation: isolate to the parent. Now its children can never overlap elements outside of it.

**Margin Collapsing**: To prevent a child's margin from leaking out of the parent, you must establish a new block formatting context. Add display: flow-root to the parent.

Try it

Explore the three classic CSS bugs. Toggle the one-line fixes to see how they instantly resolve the layout issues.

The 3 Classic CSS Bugs

/* The Flex Container */
.row {
display: flex;
width: 100%;
}
/* The Flex Child */
.child {
flex: 1;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: auto; /* BUG */
}
Av
This is a very long string of text that refuses to shrink unless forced.

Child refuses to shrink (Bug)

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1A text element inside a Flexbox row is overflowing and refusing to truncate with ellipsis. What is the standard one-line fix?
  2. 2You have a tooltip with `z-index: 9999`, but it is still appearing behind a header with `z-index: 10`. What is the most likely cause?
  3. 3What does the `isolation: isolate` property do?

Remember this

  • Use the Grid and Flex overlays in browser DevTools to see the invisible layout tracks.
  • Fix flex-child text overflow by applying min-width: 0.
  • Fix z-index battles by creating a new stacking context with isolation: isolate.
  • Fix margin collapsing by adding display: flow-root to the parent container.

Done with this concept?

Mark it complete to track your progress. No login needed.