CSS Flexbox 的一个“坑”

一、设置自适应布局，一个盒子固定尺寸，另一个盒子flex1，父盒子设置display:flex，不就够了，还要给flex1的盒子设置最小宽度吗？

答案是最好这样，在实际开发中，flex: 1 的盒子在某些情况下确实需要加 min-width: 0，否则它可能不会收缩到你期望的宽度，尤其是内容超出时。

如图所示：左边的盒子设置的flex:1,右面的盒子固定宽高，在屏幕放大或缩小时，由于左边盒子内容太长，右面盒子被压缩了，左边没有实现自适应大小。给左边盒子加上min-width: 0后，解决问题。

二、为什么有时需要 min-width: 0？

在 flex 布局下，子项的 min-width 默认是 auto，这意味着如果内容太长，flex 子项不会收缩到小于内容宽度，导致布局“撑破”或溢出。

设置 min-width: 0，可以让 flex 子项在空间不足时收缩到 0，真正实现“自适应剩余空间”

.parent {display: flex;
}
.child1 {width: 300px;
}
.child2 {flex: 1;// min-width: 0; // 不加时，内容超长会撑破
}

如果 .child2 里有很长的内容，不加 min-width: 0 时，.child2 可能不会被压缩，导致 .child1 被挤压甚至溢出。

三、结论：

• 简单场景：flex:1 通常就够了。
• 内容可能超长/溢出时：建议加 min-width: 0;，保证布局健壮。
• 这是 CSS Flexbox 的一个“坑”，加上 min-width: 0 是最佳实践。