IE11 中的 Flex：宽度 100% 不适用于嵌套的 flex 和方向“列”答案

【问题标题】：Flex in IE11: width100% not working with nested flex and direction 'column'IE11 中的 Flex：宽度 100% 不适用于嵌套的 flex 和方向“列”
【发布时间】：2018-06-17 17:50:35
【问题描述】：

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

【问题讨论】：

尝试将min-width: 0 添加到您的元素中...您已经定义了三个弹性容器。您已将flex-direction: column 应用于其中之一。这意味着其他两个默认为flex-direction: row。现在你必须处理 flex 项目的默认最小宽度，它不允许项目比它们的内容短。
鉴于 IE 在 Flexbox 方面存在相当多的问题，根据您实际尝试实现的目标，您的问题可能有不同的解决方案。如果您增加示例代码以使其更有意义，我们将能够提出正确的答案。
好的，感谢您的回复。我已经从代码中删除了flex，并用浮动元素解决了这个问题。我更喜欢使用 flex，但对于 IE 11 来说这是一个艰难的交易。

标签： html css flexbox internet-explorer-11

【解决方案1】：

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

图像实际上占据了其父级宽度的 100%，因为默认情况下 flex-items 不允许增长以填充 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>

【讨论】：

@Michiel 很好理解那个编辑！我专注于扩大规模，却忘记了缩小规模时的检查。我正在（不）耐心地等待我们不再需要担心支持 IE11 的那一天。