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

时间:2018-01-08 17:53:56

标签: html css css3 flexbox internet-explorer-11

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

1 个答案:

答案 0 :(得分:0)

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

实际上 的图片占据了父母宽度的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>