举个例子
.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 时发生。
谁能帮我找出问题的原因？
感谢您的帮助。
最佳答案
Internet Explorer 需要您指定子项的 flex 值。
尝试将属性 flex: 1 0 auto; 添加到 FlexItem 类
关于javascript - 当容器有右滚动条时，Flex 元素宽度不能在 IE11 中工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54822624/