css flex:1;min-width:0解决flex溢出原理

李恒道

原理

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property. (See §4.5 Implied Minimum Size of Flex Items.)

默认情况下，flex选项不会缩小低于他的最小内容尺寸(长单子的长度或固定尺寸元素)，改变这个问题可以去设置min-wdith或min-height属性，具体可以参考4.5的flex选项的潜在最小尺寸

一句话

默认最小尺寸是内容尺寸，所以导致溢出，直接设置为0就可以让最小尺寸低于内容尺寸来解决溢出问题

PS

4.5的潜在最小尺寸这里太复杂了....
很多英语名字我都没搞懂
有机会再细研究一下

参考

https://dfmcphee.com/flex-items-and-min-width-0/
https://www.w3.org/TR/2016/CR-css-flexbox-1-20160301/#flex-common

极品小猫

在 flex 布局中，如果没有使用 width 的理由，还是尽量使用 flex-basis 吧。
IE？滚粗~

李恒道

极品小猫 发表于 2022-5-6 14:04
在 flex 布局中，如果没有使用 width 的理由，还是尽量使用 flex-basis 吧。
IE？滚粗~ ...

这样不设置basic主要为了可以显示省略号，如果不设min-wdith/width/overflow，就没法那样显示
111(2222)                                          333
如果1疯狂延长
111111111111111111111111..(2222)333
这样的效果
我研究好久才写出来，哭了

李恒道

极品小猫 发表于 2022-5-6 14:04
在 flex 布局中，如果没有使用 width 的理由，还是尽量使用 flex-basis 吧。
IE？滚粗~ ...

对了，话说之前聊得flex布局真的不如float布局！
我们公司项目flex布局过多并且都是弹性计算的，直接卡死老安卓机了...
(还有就是很期待grid布局....)

极品小猫

李恒道 发表于 2022-5-6 14:23
这样不设置basic主要为了可以显示省略号，如果不设min-wdith/width/overflow，就没法那样显示
111(2222)   ...

经典的flex布局与省略号问题！

table 的时代过去了……迎来的是各种DIV容器BUG，里里外外，少了一个 witdh\height 就有可能导致容器塌陷的风险。

从前没有弹性盒子之前，都是 JS 去做省略号，多省心啊。

李恒道

极品小猫 发表于 2022-5-6 15:07
经典的flex布局与省略号问题！

table 的时代过去了……迎来的是各种DIV容器BUG，里里外外，少了一个 wit ...

可惜现在都是框架了，操作dom总是感觉很脏
如果各种问题能所有浏览器都一致还好，最起码能直接改
他妈的火狐没问题，谷歌有问题，前俩没问题，苹果有问题
三个都搞定了
低版本安卓又崩给你看