如何在IE中修复flex column height bug

Question

在IE中，我遇到了一个问题，我的flex列被拉伸的原因不明。我需要每个弹性项目的图像高度和宽度始终相同，并且响应所以我需要它们100％。我还需要弹性页脚始终与其他页面处于同一级别，无论弹性名称是否超过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，它迫使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

添加.image-container，它也会有效

Answer 2

我遇到了类似的问题：我在列中堆叠了2个弹性项目，并且里面都有一个图像，如下所示：

<article style="display: flex, flex-direction: column">
    <div id="topbar">
        <img src="..." id="topbar-banner">
    </div>

    <div id="content">
        <img src="..." id="background-img">
    </div>
<article>

理想情况下，我希望两列相互堆叠，每个flex项的高度与其子项相同。在除IE之外的所有浏览器中，它工作正常;但是在IE中，#topbar-banner下方和#topbar底部上方有一些空格，如果您垂直缩小页面，它会变大。

我尝试LGSon's answer，并将-ms-flex-negative: 0添加到#topbar（其中包含不需要的空格的div），并通过删除不需要的空间来解决我的问题。像这样：

<div id="topbar" style="-ms-flex-negative: 0">

不幸的是，我找不到-ms-flex-negative意味着什么的官方文档，但我看到有人说它等同于flex-shrink。

我正在使用IE11;根据微软的documentation on flexbox，我现在不应该为IE11使用任何供应商前缀：

  

Internet Explorer 11不再支持Flexbox属性的Microsoft供应商前缀（“-ms-”）版本。您应该使用非前缀名称，这是更好的标准兼容性和未来兼容性的首选。

另一方面，这个供应商前缀确实解决了我的问题而其他人没有。因此，您可以自行决定使用它;如果不存在其他替代方案，可能是值得的。

Answer 3

你只需要使用Alignment-classes（.align-items-center或.align-self-center等），确保你没有使用.my-auto类来垂直对齐它在chrome中完美运行的中心项但不是在IE中。将类.align-items-center添加到flex容器（.row）或.align-self-center添加到flex-children（.col- - 等）。

Answer 4

.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%;
  flex-shrink: 0;
}

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>

Answer 5

在父元素上尝试添加：

display: flex;
align-items: stretch;
flex-direction: column;
min-height: 1px;
-ms-flex-negative: 0;

这对我有用。