Loading…
16
CSS flexbox ate 6 hours of my life over a missing min-width
Last Tuesday I was building a simple card layout for a portfolio piece. Two cards side by side, fine on desktop, stack on mobile. Everything looked right in my head. But on actual phones the text kept squishing into a skinny column and the button wrapped weird. I tried gap, padding, media queries, even deleted the whole section and rebuilt it once. Then after 6 hours I found a random forum post about flex items needing min-width: 0 to shrink properly. That was it. One line of CSS. Has anyone else been burned by flexbox doing something that looks totally correct in preview but breaks on a real device?
1 comments
Log in to join the discussion
Log In1 Comment
bailey.sandra25d ago
Wait, min-width: 0 is what fixes that?? I've been fighting this same thing for weeks and just assumed I was doing flexbox wrong somehow. The part that gets me is how it looks perfect in dev tools on my laptop but the second I pull it up on my actual phone everything falls apart. I kept adding more padding and tweaking the media queries like an idiot when the whole time it was one little line. Six hours for one line of CSS sounds about right for flexbox honestly, that stuff is sneaky.
4