当容器有右滚动条时，Flex 项目宽度在 IE11 中不起作用答案

【问题标题】：Flex item width can not work in IE11 when container have right scrollbar当容器有右滚动条时，Flex 项目宽度在 IE11 中不起作用
【发布时间】：2019-02-26 15:37:40
【问题描述】：

这是一个例子

.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 时才会出现此问题。

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

感谢您的帮助。

【问题讨论】：

IE 已知有很多 flex-bugs...width: 80% 上的 FlexItem 导致了这个问题，如果你给它align-self: flex-start，你在 IE11 中也会遇到同样的问题...也许你可以避免在这里设置宽度:)
我尝试设置宽度：自动，它可以工作。所有项目都扩大到 100%。但是如果设置宽度：100%（或其他百分比），结果和上面描述的一样。我不知道为什么。
IE11 在 flexbox 中设置宽度有问题，试过 flex-basis: 80%?

标签： javascript html css flexbox internet-explorer-11

【解决方案1】：

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

【讨论】：

其实我不明白你为什么要在你的例子中使用 flex。一个简单的blockdisplay 应该可以解决问题。也许您可以在FlexItemclass 中尝试flex: 1 0 0;
我在我的产品中遇到了类似的问题，这只是基于项目中使用的组件的示例。所以 display: flex 是必要条件。

【解决方案2】：

我找到了关键点，可能是设置FlexItem宽度的格式。

如果你把width:80%改成200px，在IE中就可以正常使用了。

我猜如果你写成%格式，IE可能看不懂。

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

【讨论】：

是的，百分比witdh 不能工作。我被要求使用响应宽度，所以不能使用静态宽度。只能设置“width:auto;”现在。谢谢你的回答。