Loading…
22
My flex row went sideways because of one missing min-width on a card
I was building a row of cards last week and the text inside one long title pushed the whole row past the screen on mobile. Took me about 40 minutes of poking at flex-basis and flex-shrink before I realized a child with white-space nowrap refuses to shrink below its content size. Adding min-width: 0 to the card fixed it in one line, and the row stopped overflowing on a 360px viewport. I keep forgetting that flex items default to min-width auto, and it bites me every few months. Anyone got a quick way to remember this, or do you just slap min-width: 0 on everything now?
0 comments
Log in to join the discussion
Log In0 Comments
No comments yet
Be the first to share your thoughts on this discussion.