Question

如果我在位置绝对flex div的内部元素中添加max-width，它会在IE11中断开。这意味着它不尊重为内部元素设置的宽度。

http://codepen.io/alansouzati/pen/QGqvOx

HTML

<div class="container">
  <div class="inner">
    <span>test</span>
  </div>
  <div>
    <span>test2</span>
  </div>
</div>

CSS

.container {
  position: absolute;
  display: flex;
  flex-direction: column;
  background-color: red;
}

.inner {
  background-color: grey;
  width: 480px;
  max-width: 100%; // this breaks in IE11
}

如果我改变弹性方向以排它＆＃34;修复＆＃34;但是，在我试图解决的情况下，它无济于事。

另外，如果我在容器中设置宽度，它也会修复＆＃34;它，但我不能在我的容器中设置一个预先设定的宽度。

有关如何使其与flex方向列一起使用的任何想法？

Answer 1

我最终切换到max-width: 100vw;。我知道这对于具有宽度宽度的元素不起作用，因此我的“hack”包括对仅对没有指定值的元素应用100vw 的转义。

这是一个更新的codepen：

http://codepen.io/alansouzati/pen/NbwKqj

<强> CSS

.inner {
  background-color: grey;
  width: 480px;
  max-width: 100vw; // this works in IE11
}

在IE11中，具有列方向和内部最大宽度的Flexbox div会中断

1 个答案: