asked 2 months ago
2
1.3K
A long unbroken string in a flex child blows out the layout and produces a horizontal scrollbar, even with overflow: hidden on the parent.
Flex items default to min-width: auto, which means "never shrink below my content's intrinsic size". An unbreakable string has a large intrinsic size, so the item refuses to shrink and overflows.
Override it on the child:
In Tailwind that is min-w-0. The same applies vertically in a column flex container with min-h-0, which is the usual reason a scrollable panel inside a flex column won't scroll.
If the content is genuinely unbreakable text rather than a layout bug, pair it with break-words or truncate — min-w-0 lets it shrink, but you still have to say what happens to the overflowing text.
1
of 1
Git: how do I undo a commit I already pushed?
Rust: what is the actual difference between String and &str?
How should I hash passwords in 2026 — bcrypt, scrypt, or argon2?
Is storing a JWT in localStorage really that dangerous?
What is the difference between unit, integration, and e2e tests in practice?
39
0
47
0
8
0
