哇哇哇，開年頭一篇文章呀，為了鎮得住場面，特意起了這么個標題。沒錯，就是標題黨。

事情還得從上周五開始說起，那天下午，我正在公司改產品妹子提的需求，改了一會后，就切換到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的文章

總結

以上是生活随笔為你收集整理的IE这回在css flex中扳回一局？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。