CSS：Flex：IE11とiOS13のSafariで「flex-direction: column-reverse」が効かない

前提条件

• Windows10のIE11
• iOS13のSafari（iPad第6世代とiPhoneSE2020）

目的

• flexで列の順番を逆順にする。

手順

• 以下のCSSを設定

<div id="flex-box">
  <div class="col">1</div>
  <div class="col">2</div>
</div>

# flex-box {
  display: flex;
  flex-direction: column-reverse;
}

現象

• 高さがなくなり、コンテンツが重なる。

対応

• 以下の設定を列要素に設定。

.col {
   flex: 1 1 auto;
}

備考

• PC・Android版のChrome、Chromium版のEdge、古いMacのSafariでは、対応コードなく期待通りの結果になる。
• iOSのSafari　は、**「スマホ界のIE」**と呼べるぐらい独特な仕様だが、シェアがあるため無視できない。この件については、本当にIE11と同じ挙動になっていた。