当容器具有右侧滚动条时，弹性项宽度无法在IE11中工作
当容器具有右侧滚动条时，弹性项宽度无法在IE11中工作
提问于 2019-02-22 16:07:32
下面是一个例子
.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中，它可以很好地工作在chrome work well中。
但在IE11中，这并不是我所期望的。IE11 work not expected
仅当容器高度小于fex项并设置overflow-y:auto/scroll时，才会发生此问题。
有人能帮我找出问题的原因吗？
感谢您的帮助。
回答 2
Stack Overflow用户
发布于 2019-02-22 16:18:11
Internet Explorer需要您指定子项的flex值。尝试将属性flex: 1 0 auto;添加到FlexItem类
Stack Overflow用户
发布于 2019-02-26 15:37:40
我找到了关键点，可能是设置FlexItem宽度的格式。
如果你改变宽度:80%为200px，它将在IE中工作得很好。
我猜如果你用%格式写，IE可能不能很好地理解它。
所以你应该给它一个静态的长度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54822624
复制相关文章
相似问题
腾讯云开发者
