浏览器宽度扩大后再收窄,但是响应式组件跟着收窄却少收了一点宽度,导致组件溢出到视口之外
默认情况下,Flex 组件的子项会受 min-width: auto 影响。
min-width: auto 的语义是:最小宽度参考内容本身(min-content),不能随便被压到更小。
当尝试压缩的时候,浏览器会认为里面的东西有较大内容宽度倾向,此时浏览器会认为不能再缩小了
此时右边仍然保留最小宽度。导致溢出
解决方法:使用以下两句css设置最小宽度为0,即允许浏览器对其进行压缩,解除最小宽度限制
w-0
min-w-0