为什么 flex 布局中的 flex: 1; 与 width: 0; 可以避免元素空间被挤没？
在 Flex 布局中，如果某个子元素同时存在 width 和 flex: 1 属性，可能会出现子元素被整体布局挤没的情况，这是因为以下原因：
Flex 布局会计算弹性容器中所有子元素的宽度。正常情况下，当子元素没有设置 width 时，它的宽度会被计算为 auto（元素的自然宽度）。auto 对于块级元素来说表示占据全部可用空间，而对于内联元素来说表示收缩到合适宽度。
因此，在上述示例中：
的宽度为固定值 50px，而
的宽度一开始被计算为 0，但随后它会被扩充到占据弹性容器中所有剩余空间。这会导致第一个元素被挤没。
解决方法
可以通过两种方法解决此问题：
-
使用 width: min-width; 代替 width：
这样可以确保元素不会被收窄到小于其自然宽度，即使 flex: 1 也要求它占据所有剩余空间。 -
将第二个元素的 width 设置为 0：
这会让第二个元素的宽度变得无关紧要，因为它会被自动扩充到占据剩余空间。因此，它不会对第一个元素造成影响。
不过，推荐使用 flex-shrink: 0 来解决此类问题，因为它更符合 Flex 布局的设计原则。
