Ошибка Flex при попытке обернуть несколько таблиц в текущей версии Safari?

Question

Может кто-нибудь сказать мне, почему этот код не работает в MacOS Safari 13.0.4? Вторая таблица вытекает из контейнера. Chrome и Firefox оба могут содержать все внутри div, как и ожидалось.

Как это можно исправить?

div {
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            background: #f99
        }

        table {
            flex-basis: 300px;
            flex-shrink: 1;
            flex-grow: 1;
            border: 1px solid #000;
        }

<div>
        <table>
            <tr>
                <td>
                    the quick brown fox jumped over the lazy dogs
                    the quick brown fox jumped over the lazy dogs
                </td>
            </tr>
        </table>

        <table>
            <tr>
                <td>
                    the quick brown fox jumped over the lazy dogs
                    the quick brown fox jumped over the lazy dogs
                </td>
            </tr>
        </table>

        <table>
            <tr>
                <td>
                    the quick brown fox jumped over the lazy dogs
                    the quick brown fox jumped over the lazy dogs
                </td>
            </tr>
        </table>
    </div>

Если я изменю таблицы на div, это будет работать правильно, но это, очевидно, минимальный пример - таблицы требуются для окончательного решения.

(Обычно я делаю jsfiddle для ссылки, но их сайт в данный момент кажется мне неработоспособным; могу редактировать, но он не запускается или не дает мне общий URL).

Спасибо .