html - IE11中的Flex:宽度100％不适用于嵌套的Flex和方向“列”

我需要在嵌套的flex容器中设置图像的宽度为100％，但是当容器具有flex-direction: column时，这在IE11中不起作用。我试过了：

img {
    width: 100%;
    max-width: calc( 100% - 0.1px );
}

但这也不起作用。有任何想法吗？

section, .articles-wrapper, .article-wrapper {
  display: flex;
}
.article-wrapper {
  flex-direction: column;
}
img {
    width: 100%;
}

的HTML：

<section>
  <div class="articles-wrapper">
    <div class="article-wrapper">
      <img src="http://via.placeholder.com/600x150">
    </div>
  </div>
</section>

最佳答案

您是否检查过页面以查看元素的布局？

图像实际上占用了其父对象的宽度的100％，因为默认情况下，不允许flex-item增长以填充flex容器，而只能扩展到足以显示其内容的程度。

通过指定.articles-wrapper或将速记属性.article-wrapper与多个值之一一起使用，必须明确允许flex-grow: 1;和flex元素增长。

.articles-wrapper, .article-wrapper {
    flex: auto; /* shorthand for flex: 1 1 auto; */
}

要么

.articles-wrapper, .article-wrapper {
    flex: 1; /* shorthand for flex: 1 1 0%; */
}

随着您深入使用flexbox，我建议手头准备Philip Walton的Flexbugs存储库，其中列出了所有浏览器的常见错误以及每种浏览器的解决方法。

编辑米歇尔（Michiel）：flex: 1在IE11中可用，除了在将窗口缩放到小于图像尺寸时不保持纵横比。 Flexbugs #5中记录了此“功能”，可以通过添加非弹性包装器来解决：

<section>
  <div class="articles-wrapper">
    <div class="article-wrapper">
      <div> <!-- ADDED NON-FLEX WRAPPER -->
        <img src="http://via.placeholder.com/600x150">
      </div>
    </div>
  </div>
</section>