How to Write Defensive CSS: Prevent Scroll Chaining, Variable Fallbacks, and Layout Breakage

Usually we want methods to avoid unexpected CSS issues; because web content can change dynamically, CSS problems become more likely. This article introduces a series of defensive CSS code snippets to help write more robust CSS and reduce style problems caused by dynamic content changes.

Cancel Scroll Chaining

When a modal is opened and scrolled to the bottom, further scrolling can cause the underlying body element to scroll, a phenomenon known as scroll chaining.

Previously this required hacks, but now the CSS overscroll-behavior property can be used to contain scrolling.

.modal__content {
  overscroll-behavior-y: contain;
  overflow-y: auto;
}

Custom Property Fallback Values

CSS custom properties (variables) are increasingly used in web design, but their values may become invalid, especially when set via JavaScript.

If a variable is undefined, properties like max-width can compute to none. Using var() with a fallback value prevents this.

.message__bubble {
  max-width: calc(100% - var(--actions-width, 70px));
}

Use Flexible Width and Height

Fixed Height

Fixed height can cause layout breakage when content exceeds the set height. Use min-height instead of height to allow growth.

.hero {
  min-height: 350px;
}

Fixed Width

Fixed width on buttons can cause text to overflow and create a poor user experience. Replace width with min-width to allow the button to expand as needed.

.button {
  min-width: 100px;
}

Don’t Forget background-repeat

When using large images as backgrounds, they may repeat on large screens. Setting background-repeat: no-repeat prevents this.

.hero {
  background-image: url('..');
  background-repeat: no-repeat;
}

Vertical Media Queries

Testing component layout by adjusting browser height can reveal issues such as overlapping navigation in a sidebar. Using a height‑based media query ensures the sticky secondary navigation only activates on tall viewports, avoiding overlap.

@media (min-height: 600px) {
  .aside__secondary {
    position: sticky;
    bottom: 0;
  }
}