Question

我需要嵌套的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>

Answer 1

您是否检查过该页面以了解元素的布局？

实际上的图片占据了父母宽度的100％，因为默认情况下，不允许将flex-items增加到填充Flex容器，但只展开足以显示其内容。

需要明确允许.articles-wrapper和.article-wrapper元素增长，方法是指定flex-grow: 1;或使用速记属性flex使用以下几个值之一：< / p>

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

OR

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

随着您更深入地使用flexbox，我建议保留Philip Walton的Flexbugs手册，其中列出了所有浏览器的常见错误以及每种浏览器的解决方法。

EDIT Michiel：flex: 1适用于IE11，不同之处在于当窗口缩放到比图像大小更小的尺寸时，不保持纵横比。这个功能＆＃39;记录在Flexbugs #5中，可以通过添加非flex包装器来解决：

<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>

IE11中的Flex：宽度100％不适用于嵌套的flex和方向'列'

1 个答案: