IE这回在css flex中扳回一局？_html/css_WEB-ITnose

哇哇哇，开年头一篇文章呀，为了镇得住场面，特意起了这么个标题。没错，就是标题党。

事情还得从上周五开始说起，那天下午，我正在公司改产品妹子提的需求，改了一会后，就切换到Chrome看看效果，走走单元测试，呵呵呵。但是我突然就发现一个问题呀，这个flex item显示的不对呀，而且在FF和Chrome都显示“不对”，倒是在IE11里显示“正常”。

慧中标AI标书

慧中标AI标书是一款AI智能辅助写标书工具。

120

查看详情

立即学习“前端免费学习笔记（深入）”；

正常的话就是上面这个图所显示的，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的文章