Question

这是一个例子

.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项目并设置溢出-y：auto / scroll时，才会发生此问题。

有人可以帮助我找到问题的原因吗？

感谢您的帮助。

Answer 1

Internet Explorer需要您指定子代的flex值。尝试将属性flex: 1 0 auto;添加到FlexItem类

Answer 2

我发现关键点可能是设置FlexItem宽度的格式。

如果将width：80％更改为200px，它将在IE中很好地工作。

我想如果您以％格式编写，则IE可能无法很好地理解它。

所以您应该给它一个静态长度。

当容器具有正确的滚动条时，Flex项目宽度在IE11中不起作用

2 个答案: