iPhone/SafariのCSS:first-line問題

HTML/CSS

２つの要素を flex で横並びにする。

そして :first-line で１行目のフォントサイズを小さくする。

要素:first-line {
    font-size: 50%;
}

Win10/Chrome はフォントサイズにあわせて要素の幅も高さも縮まってくれるけど、

iPhone/Safari は字が小さくなるだけで、要素の大きさは変わらない。

どうして・・・
ちなみにフォントサイズを大きくしても同様、要素の幅は変わらない（ので段落ちしたりする）。
なお flex 子要素でなく inline-block でも同様。
そしてなぜか <!doctype html> を書かないHTMLなら、高さだけは縮まってくれる（幅は変わらない）。
なにこれ Safari の不具合？

知らんけどまあ・・ :first-line 使うのやめればいっか。

再現用サンプルコード

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        div {
            display: flex;
        }
        p {
            line-height: 1;
            font-size: 20px;
        }
        p:first-line {
            font-size: 50%;
        }
        p:nth-child(1) {
            background: #fee;
        }
        p:nth-child(2) {
            background: #eef;
        }
    </style>
</head>
<body>
    <div>
        <p>
            子要素①の1行目<br>
            2行目
        </p>
        <p>
            子要素②の1行目<br>
            2行目
        </p>
    </div>
</body>
</html>
Windows10/Chrome79、iOS13.3/Safari