flex 布局中为何 width:0 搭配 flex:1 可避免元素空间挤没？
在 Flex 布局中，如例子所示，为第二个元素设置 width:0 搭配 flex:1，可以防止第一个元素的宽度抢占第二个元素的空间。
计算规则
Flex 布局将容器分成父容器和子元素，父容器为弹性容器，而子元素为弹性子元素。计算布局时，父容器会根据子元素来进行。
默认情况
默认情况下，弹性子元素的最小宽度和最小高度都为 auto。auto 在块级元素中表示充分利用可用空间，在内联元素中表示收缩至合适。
第一个元素的挤占
如果为第一个元素设置 width，第二个元素没有设置，则第二个元素的宽度为 auto，表示收缩至合适。而第一个元素的 min-width 为 auto，在某些情况下可以收窄，导致第一个元素挤没了第二个元素。
设置 flex:1 宽度的作用
当为第二个元素设置 flex:1 时，它会自动扩充大小，分配剩余空间，因此不会对第一个元素造成影响。
设置 width:0 的作用
同样，由于 flex:1 的存在，第二个元素的 width:0 仅表示该元素不会分配剩余空间，而是会尽可能收窄。
更优的解决方案
虽然 width:0 可以避免第一个元素挤占，但更好的解决方案是直接为第一个元素设置 flex-shrink: 0 来禁用收窄行为，这可以有效地防止挤占问题。
