IE11でflex-direction: columnにしてalign-items: centerを指定すると中のコンテンツがはみ出してしまうバグ

先日コーディングをしていて、またIE11のflexbox関連のバグに遭遇したのでメモっておきます。今回は、flex-direction: column;とalign-items: center;を指定すると発生するバグです。 バグの詳細 IE11では、flexboxにflex-direction: column;とalign-items: center;を指定すると、flexアイテムのコンテンツがコンテナより大きい場合にはみ出してしまいます。たとえば、長い文章が入っていると、以下のように横にはみ出てしまいます。 IE11での表示 本来、グレーのボックス内（flexアイテム内）におさまってほしいテキストがはみ出してしまいます。 Firefoxでの表示 Firefox（Mac 77.0.1）では、意図したとおりグレーのボックス内にテキストがおさまります。 デモはこちら このバグが発生するソース