摘要：但是我突然就发现一个问题呀，这个显示的不对呀，而且在和都显示不对，倒是在里显示正常。同时放在了在上的，这里会长期写一些关于的文章
哇哇哇，开年头一篇文章呀，为了镇得住场面，特意起了这么个标题。没错，就是标题党。
事情还得从上周五开始说起，那天下午，我正在公司改产品妹子提的需求，改了一会后，就切换到Chrome看看效果，走走单元测试，呵呵呵。但是我突然就发现一个问题呀，这个flex item显示的不对呀，而且在FF和Chrome都显示“不对”，倒是在IE11里显示“正常”。
正常的话就是上面这个图所显示的，html和css代码如下图：
但是现在却显示成这个鬼样子了，↓↓↓
看到这个，我脑子里第一蹦出来的是第二个select框option里内容太多了。可是我的三个filter-item的flex值都是1呀，对应起来可是flex: 1 1 0，标准的三等分呀。当时时间比较赶，我就给select写了个max-width属性，临时算看着没毛病。
可是周末在家，想想，这也不是个事呀，我可是通读过flex规范的呀，怎么能容忍这种不受我控制的样式出现呢。于是，我又通读了一遍规范，呵呵呵，脸好疼。
突然，脑子里蹦出来，之前在Firefox里出现过这种情况，当时在stackoverflow搜到的解决方法时加个min-width: 1px; 还说这个是Firefox的bug，可是这个情况现现在在Chrome和FF里都出现了，那它现在是不是bug就存疑了，随后拿关键字搜了一下，呵呵呵。
链接在这：
然后又顺着找到了这里：
链接在这：
呵呵呵，FF和Chrome的flex item的min-width的initial value现在是auto了，贴一段官方的描述：
To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, the following table gives the minimum size...
上面一段blabla，意思就是说，flex item如果它的overflow属性值是visible的话，那么现在min-width和min-height的initial value是auto啦，至于这个auto最后是怎么计算的，它是根据specified size、transferred size、content size三者由一些规则算出来的，有兴趣可以找找官方文档自己看看，在我写的页面里呢，最后计算胜出的是content size，再贴一段官方描述：
The content size is the min-content size in the main axis, clamped, if it has an aspect ratio, by any definite min and max cross size properties converted through the aspect ratio, and then further clamped by the max main size property if that is definite
所以在我这里确实是第二个select的某个option的text太长了，所以并不是什么bug，呵呵呵。
解决办法，就是把flex-item的visible属性设为非visible的合法值，或者手动设置一下min-width或者min-height的值为非auto的其他合法值。
同时放在了在github上的something of css，这里会长期写一些关于css的文章
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115220.html
摘要：随着微信等社交的兴起，语音聊天成为很多必备功能，大到将语音聊天作为主要功能的社交，小到电商的语音客服店小二功能，语音聊天成为了必不可少的方式。 随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。 但是很多人感觉网页端语音离我们很遥远，这些更多是本地应用的工作，其实不然，...
摘要：随着微信等社交的兴起，语音聊天成为很多必备功能，大到将语音聊天作为主要功能的社交，小到电商的语音客服店小二功能，语音聊天成为了必不可少的方式。 随着微信等社交App的兴起，语音聊天成为很多App必备功能，大到将语音聊天作为主要功能的社交App，小到电商App的语音客服、店小二功能，语音聊天成为了必不可少的方式。 但是很多人感觉网页端语音离我们很遥远，这些更多是本地应用的工作，其实不然，...
摘要：第部分第部分第部分第部分源代码下载每日前端实战系列的全部源代码请从下载代码解读解数独的一项基本功是能迅速判断一行一列或一个九宫格中缺少哪几个数字，本项目就是一个训练判断九宫格中缺少哪个数字的小游戏。 showImg(https://segmentfault.com/img/bVbkNGa?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预...
摘要：第部分第部分第部分第部分源代码下载每日前端实战系列的全部源代码请从下载代码解读解数独的一项基本功是能迅速判断一行一列或一个九宫格中缺少哪几个数字，本项目就是一个训练判断九宫格中缺少哪个数字的小游戏。 showImg(https://segmentfault.com/img/bVbkNGa?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预...
阅读 2105·2021-09-27 13:35
阅读 342·2019-08-30 15:55
阅读 683·2019-08-30 15:53
阅读 418·2019-08-30 15:52
阅读 2010·2019-08-30 12:59
阅读 2083·2019-08-29 16:42
阅读 1178·2019-08-26 18:26
阅读 2278·2019-08-26 13:48
