Flexbox 布局溢出与修复演示

当 Flex 子项包含不可换行的长文本（如 URL）时，默认的 min-width: auto 会阻止子项收缩，导致父容器被撑开。

❌ 失败：仅使用 flex: 1

Sidebar
min-width: auto (默认)

父容器被撑宽了，出现了水平滚动条 (如果是整个页面则更明显)。

https://very-long-url.com/this-text-cannot-break-and-will-overflow-container-if-not-handled-properly/example

✅ 成功：flex: 1 + min-width: 0

Sidebar
min-width: 0

容器宽度正常，长文本被截断/隐藏。

https://very-long-url.com/this-text-cannot-break-and-will-overflow-container-if-not-handled-properly/example