html - IE10+11 中 flexbox 容器中的垂直对齐(Bootstrap 3)元素

Question

当使用 flexbox 将两个 Bootstrap 列垂直居中时，我在 IE10+11 上遇到问题。

列具有动态内容，行的最小高度必须为 65 像素。但是，如果内容扩展为多行文本，则该行的高度应该能够增长——仍然保持列垂直对齐。因此，指定固定高度不是一种选择。

问题是在 IE10+11 中 flexbox 只适用于特定的高度 - 而不是最小高度。

我尝试使用 display table-cell、float: none 等，但它破坏了 Bootstrap 中的列偏移量。

有人知道这个问题的解决方法吗？

html:

<div class="row">
  <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Title - I can be any size</div>
  <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Optional sub title - I can be any size</div>
</div>

CSS:

.row {
  min-height: 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

JsFiddle here (包括供应商前缀。)

Answer 1

我们似乎可以通过将 .row 包装在具有另一个 flex 定义的元素中来解决最小高度错误 - 如下所示:

<div class="row-fix">
    <div class="row">
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Title - I can be any size</div>
        <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">Optional sub title - I can be any size</div>
    </div>
</div>

将此添加到 css:

.row-fix {
     display: flex;
     flex-direction: row;
 }
.row {
    min-height: 65px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}