[英]Flex item width can not work in IE11 when container have right scrollbar
這是一個例子
.FlexContainer { background: hsla(0,0%,0%,.1); display: flex; flex-direction: column; max-height: 220px; margin: 10px; padding: 20px; width: 300px; overflow-y: auto; } .FlexItem { background: hsla(0,0%,0%,.1); width: 80%; margin: 2px; padding: 6px; word-break: break-all; white-space: normal; cursor: pointer; } .FlexItem:hover{ background-color: red; }
<html> <head> <title>demo</title> </head> <body> <div class="FlexContainer"> <div class="FlexItem"> The contents is short in IE11. </div> <div class="FlexItem"> The contents is long - inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> <div class="FlexItem"> The contents inside of this box are overflowing their container in IE11. </div> </div> </body> </html>
在chrome中可以正常工作
但是在IE11中，這不是我期望的。 IE11無法正常工作
僅當容器高度小於fex項並設置溢出-y：auto / scroll時，才會發生此問題。
有誰能幫助我找到問題的原因？
感謝您的幫助。
Internet Explorer需要您指定子代的flex值。 嘗試添加屬性flex: 1 0 auto; 到FlexItem類
我發現關鍵點可能是設置FlexItem寬度的格式。
如果將width：80％更改為200px，它將在IE中正常運行。
我想如果您以％格式編寫，則IE可能無法很好地理解它。
因此，您應該給它一個靜態長度。
IE11中的問題是要求flex-content-item占用與table相同的全寬度
[英]Issue in IE11 want flex-content-item to occupy full width same as table
滾動條沒有出現在IE11中，帶有angular2-multiSelect dropDown
[英]scrollbar not appearing in IE11 with angular2-multiSelect dropDown
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.