IE10+11 flexbox 容器中的垂直对齐（Bootstrap 3）元素

Question

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

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

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

我尝试使用显示表格单元格、浮动：无等，但它破坏了 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;
}