3 Unintuitive CSS Layout “Solutions”

Here are a few of my least favorite, easy to forget, unintuitive CSS layout "solutions":

.wat {
  min-height: 0;
  min-width: 0;
  flex-shrink: 0;
}

Height 0? Wat? Shrink 0? Wat? Theo thinks he likes it. But…

Then there's minmax(min(), 1fr)? Wat?

.uhhhhhh {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}

Functional programming much?…

Remove intrinsic minimal sizing #

The minimum width of grid and flex children is auto. Setting it explicitly to 0 removes the intrinsic size, unlocking various things.

.example-1 {
  min-height: 0;
  min-width: 0;
}

Study more about it on CSS Tricks by Chris Coyier or from Theo over on YouTube.

Don't squish me #

Often I'll make a flex layout where 1 child should be "pushy" or a dominant space consumer. Works great until a sibling to the pusher goes oval at small viewports, even though a firm height and width are set.

The fix:
Don't squish me, my flex-shrink is 0... which indicates false? which means I don't want to shrink? I am unshrinkable. I have no shrinkability.

.example-2 {
  flex-shrink: 0;
}

So intuitive. Not.

Intrinsically responsive grid columns #

So I don't have this full, triple nested function memorized. I can remember "repeat, auto-fit, minmax" as like the summary of the trick. Which gets me this far:

.example-3 {
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr))
}

But that's not the full snippet I end up using in production. It works great until it's a single column of 10rem minimum width boxes. At which point, they dont go smaller, and so they can cause horizontal overflow in a parent container that's smaller than 10rem.

The fix:
add min(10rem, 100%) in place of 10rem.

.example-3 {
  grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr))
}

It's extra to write, but it unlocks the "intrinsically responsive grid layout", which behaves as I was hoping all along.

Study more in this post from Evan Minto:

When the container is smaller than 10rem, the minimum value in our minmax() expression is set to the full width of the container, giving us a nice single-column view with no overflow. When the container is larger than 10rem, the minimum value is set to 10rem, so we get a responsive grid with equal tracks of at least 10rem each.