IE 中的嵌套 flexbox 高度问题

Question

我在里面嵌套了一些图像的 flexbox，它在 Chrome 中看起来不错，但是在 IE 中，您可以看到边界flex-item-wrapper与图像底部不齐平。顺便说一下，在布局中，我有时会有几个flex-row带有很多图片的。

.flex-list {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
}
.flex-item-wrapper {
  width: 100%;
  border: 1px solid green;
}
.flex-item {
  height: 100%;
  width: 100%;
  border: 1px solid blue;
}
.picture {
  width: 100%;
}

<div class="flex-list">
  <div class="flex-row">
    <div class="flex-item-wrapper">
      <div class="flex-item">
        <a href='#'>
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </a>
      </div>
    </div>
    <div class="flex-item-wrapper"></div>
    <div class="flex-item-wrapper"></div>
    <div class="flex-item-wrapper"></div>
  </div>
</div>

Answer 1

这似乎有效：

.flex-row {
  display: flex;
  flex: 0 0 auto; /*added*/
}

或者

.flex-row {
  display: flex;
  height: 100%; /*added*/
}

见简化演示：

.flex-row {
  display: flex;
  flex: 0 0 auto; /*added*/
}

.flex-row {
  display: flex;
  height: 100%; /*added*/
}