Defensive CSS: Make Your Layouts Resilient with Flex Wrap, Spacing, and Object-Fit

Flex Layout Wrapping

Flexbox is a widely used CSS layout method. By setting

display: flex

on a parent, its children are placed in a row. When the available space is insufficient, the items do not wrap by default, causing horizontal scrollbars. Adding

flex-wrap: wrap

enables automatic line breaks.

<code>.options-list {
    display: flex;
}
</code>

Applying the wrap rule prevents the scrollbar:

<code>.options-list {
    display: flex;
    flex-wrap: wrap;
}
</code>

In most flexbox layouts, allowing items to wrap is a safe default unless intentional scrolling is desired.

Whitespace and Spacing

Developers must account for varying content lengths by adding consistent spacing to elements, even when it seems unnecessary. This avoids cramped layouts when text expands.

<code>.section__title {
  margin-right: 1rem;
}
</code>

Handling Overly Long Text

Long text can break a layout, especially when titles become too wide. Defensive CSS uses properties like

text-overflow

,

white-space

, and

overflow

to truncate content gracefully.

<code>.username {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</code>

Preventing Image Stretching or Compression

When image aspect ratios cannot be controlled, applying

object-fit: cover

ensures images fill their containers without distortion, even when users upload pictures of varying sizes.

<code>.card__thumb {
  object-fit: cover;
}
</code>

<code>img {
  object-fit: cover;
}
</code>