解决flex布局解决内容溢出隐藏不生效问题总结

核心：需打破Flex项默认的min-width:auto限制，使overflow:hidden和text-overflow生效

方法	适用场景	优势
min-width:0	单行文本省略	兼容性好，主流方案
flex-basis:0	动态宽度分配	精准控制伸缩基准
width:0	简单布局	代码简洁
overflow:auto	需滚动查看完整内容	保留内容完整性

注意：这是横向问题，如果高度出现同样问题设置min-height：0

若文本位于Flex子项内部，需确保‌父链节点‌中至少一个设置min-width:0或width:0

flex：none和flex-shrink：0的区别

‌对比维度	flex: none	flex-shrink: 0
等价写法	flex: 0 0 auto	flex: 0 1 auto
伸缩行为	禁止收缩和扩展	禁止收缩，允许扩展
‌尺寸计算	严格由内容决定（忽略显式width）	可固定宽度或内容宽度
‌flex-basis	强制auto（内容优先）	保持auto（允许覆盖）
适用场景	按钮/图标/Logo等需保持自然宽度的元素	固定宽度侧边栏、禁止收缩但需扩展的元素
‌扩展性控制	完全不可扩展	需配合flex-grow:1实现扩展
空间分配优先级	不参与任何空间分配）	参与剩余空间分配（若允许扩展）