显示的flex项宽度问题：IE11中的inline-flex

Question

以下是问题的简单说明：

＆＃13;

＆＃13;

.parent {
  width: 150px;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

http://jsfiddle.net/fxyne157/

在Chrome和Firefox中，带有display: inline-flex的容器div内的固定宽度div的宽度不受容器父级宽度的约束，这是人们对inline-flex的期望。 / p>

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

在IE 11上看起来如何，即使使用inline-flex：

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

谢谢！

Answer 1

在.parent元素上，使用width: 150px代替min-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>