flex関連プロパティではブラウザのごとの仕様により解釈が異なって、見た目の違いや実現できないことがいくつかあります。
その中で、flexプロパティを適用させた要素の孫要素の高さをコンテナいっぱい100%にするためのtipsです。

flexコンテナの孫要素の高さを親要素いっぱいにしたい

そもそもなぜこのようなことをしたいかというと、flexで横並びにした要素、例えば「カード型コンテンツ」の中身を上辺と下辺にぴったり合わせたいとすれば、その要素たちを「ラップする要素」を作成し、flexプロパティを適用し、flex-direction: columnとjustify-content: space-between;で、縦並びにしながら上下いっぱいに広がるように要素を配置します。
確認ですが、このとき「ラップする要素」はflexの子要素で、「カード型コンテンツ」は孫要素です。

子要素で起きていること

flexの子要素、横並びになったカードたちはデフォルトでalign-items: stretchが適応されることで高さが揃います。
この孫要素にheight: 100%を適用させつつ、上記の縦並びにしながら上下いっぱいに広がるように要素を配置をしたいわけですが、safariでは高さ100%を認識してくれません。
少し前はchromeでもこの現象が起きていましたが、今はsafariのみで発生しています。

高さが揃えられた子要素たちは高さを持っていないと解釈される

どうやらflexプロパティで高さが揃えられた子要素たちは高さを持っていないと解釈されるようで、height: 100%が無視されてしまいます。
ということで困らされるのですが、ここでのCSS-hackは子要素へのdisplay: flexで孫要素の領域をいっぱいにします。

css

.wrap {
  display: flex;
  justify-content: space-around;
}

.inner {
  display: flex;
}

.inner_inner {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

デフォルトのalign-items: stretchの効果を使う

display: flexを与えた要素のデフォルトのalign-items: stretchの効果を利用することで高さの領域をいっぱいにまで広げます。
サンプルは以下のようになります。

おわります。