IE11で flex の align-items:center が min-height に対して効かない

HTML/CSS 
<div class="xxx">あいうえお<div>

この要素の高さを min-height で確保し、テキストを上下中央に配置するため display:flex と align-items:center を使った。

.xxx {
  min-height: 64px;
  display: flex;
  align-items: center;
}

これがIE11だと動かない。テキストが上に配置される。
なお min-height でなく height ならちゃんと動く。なぜか min-height だとダメになるIE11のバグっぽい感じ。

①ラッパーもflexにするとなぜか動く
問題の要素の親を

<div class="wrap">
  <div class="xxx">あいうえお<div>
<div>

flex にすると動く。

.wrap {
  display: flex;
  flex-direction: column; /* 必要に応じて */
  flex-wrap: wrap; /* 必要に応じて */
}
.xxx {
  width: 100%; /* 必要に応じて */
  min-height: 64px;
  display: flex;
  align-items: center;
}


IE11で「flexbox」「min-height」「aligin-items: center」の組み合わせが効かない時の対処法

「/* 必要に応じて */」の行は、上下中央に必須ではないが、崩れないようにするためにいずれかまたは複数が必要になるだろう。

②:afterでゴニョゴニョするとなぜか動く

.xxx:after {
  content: '';
  min-height: inherit;
  font-size: 0;
}


(GitHub Issues) IE11: align-items: center with min-height workaround #231
※イイネが大量についてる arsentver という人のコメント。

つまり「見えない子要素（flexアイテム）に min-height を持たせる」と動くもよう。after でなく before でもよい。
なんなら擬似要素でなく、明示的に見えない要素を置いて、

<div class="xxx"><div class="fix"><div>あいうえお<div>

それに min-height をつけてもよい。

.xxx > .fix {
  min-height: inherit;
}

なお、子要素が親の min-height と同じ値を持ってしまうので、border/padding/box-sizing などの指定によっては親の高さが余分に大きくなってしまう。その場合は、inherit でなく値を明記するなど調整が必要だろう。