{
  "$type": "site.standard.document",
  "description": "min-height: 0 , flex-shrink: 0 , and repeat(auto-fill, minmax(min(10rem, 100%), 1fr))",
  "path": "/3-unintuitive-layout-solutions",
  "publishedAt": "2025-05-22T19:51:25.667Z",
  "site": "at://did:plc:jnj7wcwuvspxdsipmecmx7rs/site.standard.publication/self",
  "tags": [
    "blog",
    "css"
  ],
  "textContent": "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.",
  "title": "3 Unintuitive CSS Layout “Solutions”"
}