position:stickyの要素が、flexbox内で機能しない（safari）

リストを横並びで２つ表示する画面を作成しています。
左右のリストは、どちらも高さを固定し、はみ出た分はスクロールするようにしています。
また、「リストタイトル」はスクロールさせず、常に固定表示します。

ここで、以下のようなＨＴＭＬ・ＣＳＳを作成したのですが、
safariで見た時だけ、「リストタイトル」が途中からスクロールしてしまいます。（ChromeやEdgeでは固定されます）
これはsafariのバグ？でしょうか・・・
safariでも、「リストタイトル」を固定する方法はありませんでしょうか？
できればjavascriptは使わず、ＨＴＭＬ・ＣＳＳだけで解決したいと考えています。

jsfiddleでも実装してみました

HTML
1<div class="parent">
2  <div class="left">
3    <div class="list">
4      <div class="header">
5        リストタイトル
6      </div>
7      <ul>
8        <li>リストアイテム</li>
9        <li>リストアイテム</li>
10        　　<!-- リストアイテムが続きます -->
11      </ul>
12    </div>
13  </div>
14  <div class="right">
15    <div class="list">
16      <div class="header">
17        リストタイトル
18      </div>
19      <ul>
20        <li>リストアイテム</li>
21        <li>リストアイテム</li>
22        　　<!-- リストアイテムが続きます -->
23      </ul>
24    </div>
25  </div>
26</div>

CSS
1.parent {
2  display: flex;
3}
4
5.left, .right {
6  width: 50%;
7}
8
9.list {
10  max-height: 200px;
11  overflow: auto;
12}
13
14.header {
15  position: -webkit-sticky;
16  position: sticky;
17  top: 0;
18  background: #2a343d;
19  color: #fff;
20}