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 (10 rem , 100 % ) , 1 fr )) } 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 (10 rem , 1 fr )) } 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 (10 rem , 100 % ) , 1 fr )) } 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.