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.

<code>.card { display: flex; }</code>

<code>.card__title { overflow-wrap: break-word; min-width: 0; }</code>

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:

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

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:

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

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.

<code>img { max-width: 100%; object-fit: cover; }
</code>

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.

<code>aside { align-self: start; position: sticky; top: 1rem; }
</code>

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.

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

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