显示的弹性项目宽度问题：IE11 中的 inline-flex答案

【问题标题】：flex item width problem with display: inline-flex in IE11显示的弹性项目宽度问题：IE11 中的 inline-flex
【发布时间】：2023-04-05 13:22:01
【问题描述】：

以下是问题的简单说明：

.parent {
  width: 150px;
}

.container {
  display: inline-flex;
  height: 350px;
  background: blue;
}

.photo {
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
}

<div class="parent">
  <div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
  </div>
</div>

http://jsfiddle.net/fxyne157/

在 Chrome 和 Firefox 中，带有display: inline-flex 的容器 div 内的固定宽度 div 的宽度不受容器父容器的宽度的限制，这正是 inline-flex 所期望的。

在 Internet Explorer 11 中，固定宽度 div 的宽度是弹性容器父级宽度的百分比。

它在 IE 11 上的样子，即使使用 inline-flex：

任何想法，无论这是否是一个已知的错误，或者我是否遗漏了一些明显的东西？如何使.container 扩展到所需的空间，以便所有.photo div 都是150px，而不管.parent 容器的宽度如何？

谢谢！

【问题讨论】：

试过供应商前缀？
是的，我尝试使用 -ms-inline-flexbox，但结果相同。
您好，感谢您的帮助。不幸的是，这不起作用 - 如果我用 .parent 将 .container 包裹在您的笔中，宽度为 150px（很遗憾，我无法在我的用例中删除它），那么包含的子项会尝试适应这 150 个像素。
Michael_B 做到了，谢谢。
@Michael_B 在 2019 年仍然相关。感谢您的提示。它应该是一个标记的答案！

标签： html css internet-explorer flexbox

【解决方案1】：

在.parent 元素上，使用min-width: 150px 代替width: 150px。

在.photo 项上，添加flex-shrink: 0，这将禁用flex-shrink: 1 的默认设置。

IE11全是flexbugs。

.parent {
  min-width: 150px; /* adjustment */
}

.container {
  display: inline-flex;
  height: 350px;
  background: blue;
}

.photo {
  width: 150px;
  height: 100px;
  background: red;
  margin: 2px;
  flex-shrink: 0;  /* adjustment */
}

<div class="parent">
  <div class="container">
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
    <div class="photo"></div>
  </div>
</div>

【讨论】：