css - 如何修复 IE 中的 flex 列高度错误

Question

在 IE 中，我遇到了一个问题，我的 flex 列由于未知原因被拉伸(stretch)了。我需要每个 flex 元素的图像高度和宽度始终相同并且响应迅速，所以我需要它们为 100%。我还需要 flex 页脚始终与其他页脚处于同一水平，无论 flex-name 是否跨越 1 行以上，都粘在容器的底部。

.flex-container {
  display: flex;
  border: 1px solid red;
}

.flex-item-wrapper {
  display: flex;
  border: 1px solid green;
  flex-direction: column;
  width: 185px;
}

.link-spanner {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

.flex-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: auto;
}

.image-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
}

img {
  height: 100%;
  width: 100%;
}

.flex-item-name {
  max-width: 100%;
  text-align: center;
}

<div class="wrapper">
  <div class="flex-container">
    <div class="flex-item-wrapper">
      <a href='#' class="link-spanner"></a>
      <div class="flex-header">
        <div class="image-container">
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </div>
      </div>
      <div class="flex-name">Bingobongo Bongobingobongo</div>
      <div class="flex-footer">
        <button>submit</button>
      </div>
    </div>
    <div class="flex-item-wrapper">
      <a href='#' class="link-spanner"></a>
      <div class="flex-header">
        <div class="image-container">
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </div>
      </div>
      <div class="flex-name">Bingobongo Bongo</div>
      <div class="flex-footer">
        <button>submit</button>
      </div>
    </div>
    <div class="flex-item-wrapper">
      <a href='#' class="link-spanner"></a>
      <div class="flex-header">
        <div class="image-container">
          <img class="picture" src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">
        </div>
      </div>
      <div class="flex-name">Bingobongo Bongobingobongo</div>
      <div class="flex-footer">
        <button>submit</button>
      </div>
    </div>
  </div>
</div>

jsfiddle

Answer 1

除了这个post/answer ，如果您将 min-height: 1px; 添加到 .flex-header 和 .image-container 它将在 IE11 中工作你的情况也是..

.. 我也不知道为什么，尽管根据这个 Microsoft bug report github post ，它会强制 IE 根据图像重新计算尺寸。

Updated fiddle

.flex-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: auto;
  min-height: 1px;
}

.image-container {
  margin-top: 5px;
  position: relative;
  width: 100%;
  min-height: 1px;
}

实际上，如果您将 -ms-flex-negative: 0; 添加到 .flex-header 和 中，它也会起作用。图片容器