CSS: Flex 在 IE11 中不会为 div 保持相同的高度

Question

我目前正在使用 display: flex; 来显示 3 个图块，这些图块会根据内容最多的图块调整并保持相同的高度。

以下 HTML/CSS 适用于除 IE11 以外的所有浏览器 & 我不明白为什么。

我尝试将 min-height: 100vh; 添加到我的 richTextOne class 中，但这使所有容器的高度保持不变，并且还增加了高度，所以这不是我想要的对于.

min-height: inherit; 到我的 richTextOne class 使得容器并非都具有相同的高度。每个图块的高度 div 取决于其中的内容量。

非常感谢任何帮助。

谢谢！

.flex-box {
  width: 100%;
  min-height: 345px;
  display: flex;
  flex-direction: row;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
}

.richTextOne {
  flex: 1 auto;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}

<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
  <!--/* Tile 1 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah</p>
    </div>
  </div>

  <!--/* Tile 2 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah</p>
    </div>
  </div>

  <!--/* Tile 3 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah blah blah blah blah blah blah</p>
    </div>
  </div>
</div>

Answer 1

将 align-items: stretch; 添加到您的 flex parent。

.flex-box {
  width: 100%;
  min-height: 345px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
  height: 100%;
}

.richTextOne {
  flex: 1 auto;
  height: 100%;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}

<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class=“flex-box”>
  <!--/* Tile 1 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah</p>
    </div>
  </div>

  <!--/* Tile 2 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah</p>
    </div>
  </div>

  <!--/* Tile 3 */-->
  <div class=“tile”>
    <div class="richTextOne">
      <p>blah blah blah blah blah blah blah blah blah</p>
    </div>
  </div>
</div>

Answer 2

IE11 中存在大量与 flex 相关的错误。

见https://caniuse.com/?search=flex

特别是与您的代码相关的内容：

In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.

Answer 3

我的系统上没有 Internet Explorer 11，但我注意到您固定了磁贴等的宽度，因此如果调整页面大小，它会 out-of-place。

在下面测试我的代码，看看它是否适用于 ie11

<style>

    *, *::after, *::before {
        box-sizing: border-box;
    }

    .flex-box {
    width: 100%;
    min-height: 345px;
    display: flex;
    flex-direction: row;
    }

    .tile {
        display: inline-block;
        width: 33%;
        padding-bottom: 0px;
        margin-left: 1px;
        margin-right: 61px;
        background-color: #e2e2e2;
    }
        .tile:last-child {
            margin-right: 0;
        }

    .richTextOne {  
        padding: 1rem;
        display: block;
    }

</style>

<!-- Flex rules will automatically sync height of all div.tile boxes -->
<div class="flex-box">
<!--/* Tile 1 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah blah blah</p>
  </div>
</div>

<!--/* Tile 2 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah</p>
  </div>
</div>

<!--/* Tile 3 */-->
<div class="tile">
  <div class="richTextOne">
    <p>blah blah blah blah blah blah blah blah blah</p>
  </div>
</div>

如果您有任何问题，请随时提问。

Answer 4

您的意思是 IE 中的图块不遵守 min-height: 345px？除此之外，我在 IE 11 中没有发现其他问题。

如果你指的是min-height问题，可以参考this doc。解决方法是在 flex-box:

周围添加一个弹性列包装器

.flex-box {
  width: 100%;
  min-height: 345px;
  display: flex;
  flex-direction: row;
}

.tile {
  display: flex;
  flex-direction: column;
  width: 348px;
  padding-bottom: 0px;
  margin-left: 1px;
  margin-right: 61px;
}

.richTextOne {
  flex: 1 auto;
  padding-top: 35px;
  padding-left: 24px;
  padding-right: 11px;
}

<div style="display: flex; flex-direction: column;">
  <div class="flex-box">
    <!--/* Tile 1 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah blah blah</p>
      </div>
    </div>

    <!--/* Tile 2 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah</p>
      </div>
    </div>

    <!--/* Tile 3 */-->
    <div class="tile">
      <div class="richTextOne">
        <p>blah blah blah blah blah blah blah blah blah</p>
      </div>
    </div>
  </div>
</div>

Answer 5

在我的 flex-box div 上，我需要添加 align-items: stretch; 以使 child div 等高。谢谢大家！

CSS: Flex 在 IE11 中不会为 div 保持相同的高度

CSS: Flex doesn't keep same height for divs in IE11

html

css

internet-explorer

flexbox