資訊專欄INFORMATION COLUMN
摘要：但是我突然就發現一個問題呀，這個顯示的不對呀，而且在和都顯示不對，倒是在里顯示正常。同時放在了在上的，這里會長期寫一些關于的文章
哇哇哇，開年頭一篇文章呀，為了鎮得住場面，特意起了這么個標題。沒錯，就是標題黨。
事情還得從上周五開始說起，那天下午，我正在公司改產品妹子提的需求，改了一會后，就切換到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的文章
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/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); 效果預覽 按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預...
閱讀 2265·2021-09-27 13:35
閱讀 561·2019-08-30 15:55
閱讀 810·2019-08-30 15:53
閱讀 555·2019-08-30 15:52
閱讀 2146·2019-08-30 12:59
閱讀 2269·2019-08-29 16:42
閱讀 1385·2019-08-26 18:26
閱讀 2466·2019-08-26 13:48
