How to Write Defensive CSS: Prevent Layout Issues with Flex, Grid, and Overflow

This article, translated from Ahmad Shadeed’s “Defensive CSS”, presents a collection of defensive CSS code snippets to help write more robust CSS and avoid unexpected style issues caused by dynamic content.

Using justify-content: space-between

In a flex container, justify-content can separate child elements, but when the number of children changes the layout may look odd. The spacing is generated by justify-content: space-between, not by gap or margin. When fewer than four items are present, the effect can be unfriendly. Solutions include using margin, the gap property (browser support permitting), padding, or adding an empty placeholder element.

Example using gap:

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

Text on images

When displaying text over an image, consider the appearance if the image fails to load. If the image is missing, white text on a white background becomes unreadable. Adding a background color to the <img> element solves this, applied only when the image fails.

.card__img {
  background-color: grey;
}

Watch out for fixed values in CSS Grid

When a grid container defines fixed column widths, small viewports may lack space, causing layout issues. Use media queries to adjust the grid for smaller screens.

.wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .wrapper {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 1rem;
  }
}

Show scrollbars only when necessary

For long content, set overflow to auto (or overflow-y: auto) so scrollbars appear only when needed. Avoid forcing overflow: scroll on short content.

.element {
  overflow-y: auto;
}

Prevent layout shift from scrollbar gutter

Scrollbars occupy space, shrinking the content area. Use scrollbar-gutter: stable to reserve space and avoid layout changes when a scrollbar appears.

.element {
  scrollbar-gutter: stable;
}

This is the third part of the series; previous parts can be read via the provided links.