原文地址：gitub上的Flexbugs list，可以看到Flex布局在IE糟糕表現的詳細描述。
2. Column flex items set to align-items:center overflow their container
flex 容器如果設置豎排，並且垂直居中，flex子項目的文字會溢出容器。解決辦法是給子項目設置一個 max-width:100%。Edge修復了這個bug。
下面這段代碼，來動手看下在IE10、11下的表現。
<style> .FlexContainer { align-items: center; background: hsla(0,0%,0%,.1); display: flex;
/*display: -ms-flexbox;*/ flex-direction: column;
/*-ms-flex-direction: column;*/ height: 200px; justify-content: center; margin: 1em; padding: 2em; width: 300px;
} .FlexItem { background: hsla(0,0%,0%,.1); padding: 1em;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem"> The contents inside of this box are overflowing their container. </div>
</div>
</body>
在IE11下預覽，如圖：
經過試驗發現，就算不設置 flex-direction:column, 這段文字依舊義無反顧地溢出，而不會像在其他瀏覽器下那樣，自動換行。比如Chrome瀏覽器：
給子項目設置 max-width: 100%，並不會對其他瀏覽器造成額外的影響。
為什么會這樣？原來和 flex-shrink 的默認值有關系。IE默認為 0，既空間不足，項目不縮小。
但是如果設置了 flex-shrink 為 1 呢，IE 依舊固執地不縮小這個項目，原因在於容器同時設置了 flex-direction:column 和 align-items:center。
原來是這倆屬性在IE10不能並存。只要取消其中一個，並把flex-shrink設置為1，該溢出問題就可以得到解決。
4. flex shorthand declarations with unitless flex-basis values are ignored
簡寫的flex屬性，第三個參數 flex-basis 的值如果不寫單位，在IE10,11下會該 flex 被忽略。比如 flex: 0 1 0%; 這個百分號不能省略。
Edge修復了這個bug。
也可以寫成0px，但是推薦用0%。因為有些CSS壓縮工具會把 0px 轉換成 0，而不會對 0% 下手轉換。
5. Column flex items don't always preserve intrinsic aspect ratios
豎排彈性容器下，如果子項寬度大於容器寬度，子項並不會隨着容器保持寬高比例。
解決辦法是給這個子項再包裹一個容器，這樣子項就不再是一個伸縮項目，尺寸上就可以正常縮放。
<style> * 1. Add a wrapper element to house the element with an intrinsic aspect ratio.*/ .FlexContainer { background: hsla(0,0%,0%,.1); display: flex; flex-direction: column; height: 300px; margin: 1em; width: 300px;
} .FlexItem { /* 1 */ flex-shrink: 0; /* 2 */
} img { height: auto; width: 100%;
}
</style>
</head>
<body>
<div class="FlexContainer">
<div class="FlexItem">
<img src="http://placehold.it/800x200/333">
</div>
</div>
</body>
比如這個圖片寬高為800*200，Flex容器寬度300。給圖片加一個容器，圖片正常縮放。小聲的說，這個問題貌似Chrome也有呢...
6. The default flex value has changed
新的規范更改了flex的默認值，而IE10，11依舊沿用舊的默認語法。如圖：
| Declaration | What it should mean | What it means in IE 10 |
|---|---|---|
| (no flex declaration) | flex: 0 1 auto |
flex: 0 0 auto |
flex: 1 |
flex: 1 1 0% |
flex: 1 0 0px |
flex: auto |
flex: 1 1 auto |
flex: 1 0 auto |
flex: initial |
flex: 0 1 auto |
flex: 0 0 auto |
7. flex-basis doesn't account for box-sizing:border-box
flex-basis如果有一個明確的值，既除了auto以外的值，那么該項目就相當於有一個明確的寬度/高度，占據固定空間。
在IE10/11下，盒子內容的寬度是 flex-basis 設置的具體的寬度，它會無視我們設置的 box-sizing:border-box;
如果 flex-basis 值是100%，元素就會溢出容器。比如看這段代碼在IE下的表現：
<style> .FlexContainer { background: hsla(0,0%,0%,.1); display: flex; margin: 1em; padding: 1em; } .FlexItem { background: hsla(0,0%,0%,.1); background-clip: padding-box; border: 1em solid transparent; box-sizing: border-box; flex: 0 0 100%; padding: 1em; text-align: center; } </style> </head> <body> <div class="FlexContainer"> <div class="FlexItem">Item with padding and border</div> </div> </body>
在IE11的效果如下：
這個bug在Edge已經修復。但是基於IE10和11的廣大用戶群，還是得想辦法解決。解決辦法有兩種：
1. flex-basis 設置為 auto，不給它設置具體寬度，然后再給這個元素加一個 width:100%。
2. 給子項再包裹一個容器，把這個容器當成flex容器的子項，在這個容器上設置 flex: 0 0 100%。
8. flex-basis doesn't support calc()
IE10 、11，不支持 flex 第三個參數 flex-basis 的值為 calc()。如圖：
IE11下直接報錯，單獨寫 flex-basis 則可以識別。
而在IE10下，無論簡寫不簡寫，都無法識別這個值。
解決辦法：
1. 針對IE10和IE11：
.FlexItem { flex: 0 0 auto; width: calc(100%/3); }
2. 如果是IE 11，不采用flex簡寫即可。
.FlexItem { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100%/3); }
12. Inline elements are not treated as flex-items （嗯，為什么跳到12了，因為忽略掉的那幾個是其他瀏覽器的。本文只批判IE）
IE10、11: 內斂元素不能作為彈性伸縮項目，包括:before 和 ::after 這些偽類元素。
IE11修復了這個bug，但是 :before 和 ::after 仍然不能作為伸縮彈性項目。
解決辦法是給內聯元素加個 display: block; 即可。
13. Importance is ignored on flex-basis when using flex shorthand
flex: 0 0 100%!important;
給flex簡寫加 !important，在IE10，只對前兩個參數有效，第三個參數無效。這個bug在IE11修復。而在IE10，再單獨寫上flex-bsis即可：
.FlexItemImportantOverride { flex: 0 0 100%!important; flex-basis: 100%!important; }
實際項目應用中的補充：
在IE10，justify-content 對子項目的span不起作用。這時候把span設置為 display:block; 即可。