How to Write Defensive CSS: Controlling Minimum Sizes in Flexbox & Grid

CSS flexbox content minimum size

When a flex item contains text or an image larger than the item itself, the browser does not shrink the content—this is the default flexbox behavior. Adding min-width: 0 to the flex item overrides the default auto value and allows the text to wrap.

.card { display: flex; }

.card__title { overflow-wrap: break-word; min-width: 0; }

Similarly, setting min-height: 0 on a flex column enables wrapping.

CSS grid content minimum size

In CSS grid, child elements also default to a minimum size of auto, causing overflow when the content exceeds the grid item. Three common solutions are:

Use the minmax() function.

Set min-width on the grid item.

Apply overflow: hidden to the grid item.

Choosing the minmax() approach, the grid definition becomes:

@media (min-width: 1020px) {
  .wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 248px; grid-gap: 40px; }
}

auto-fit vs auto-fill

When using minmax() in a grid, the distinction between auto-fit and auto-fill matters. auto-fit expands grid items to fill large remaining space, while auto-fill keeps item widths unchanged, preserving the space.

Example with auto-fit can cause a single grid item to stretch across the container, which is often undesirable; auto-fill is usually the better choice:

.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-gap: 1rem; }

Maximum image width

Always set max-width: 100% for images (and optionally object-fit: cover) in your CSS reset to ensure images scale correctly within their containers.

img { max-width: 100%; object-fit: cover; }

CSS grid using position: sticky

Applying position: sticky to a grid child (e.g., an aside) requires overriding the default stretch behavior with align-self: start so the sticky element behaves as expected.

aside { align-self: start; position: sticky; top: 1rem; }

Union selector

Using a union selector for cross‑browser placeholder styling is not recommended because it creates an invalid rule per W3C specifications. Instead, write separate rules for each vendor prefix.

/* Not recommended */
input::-webkit-input-placeholder,
input:-moz-placeholder { color: #222; }

/* Recommended */
input::-webkit-input-placeholder { color: #222; }
input:-moz-placeholder { color: #222; }