Почему не сгибают-растут: 1 работает за столом в Safari?

Question

Вот фрагмент.

.outer-wrapper {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
}

.inner-wrapper {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
}

table {
  border: 1px solid black;
  border-spacing: 0;
  flex-grow: 1;
}

td,
th {
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  margin: 0;
  padding: 0.5rem;
}

td:last-child,
th:last-child {
  border-right: 0;
}

tr:last-child td {
  border-bottom: 0;
}

<div class="outer-wrapper">
  <h1>Table</h1>
  <div class="inner-wrapper">
    <table>
      <thead>
        <th>Foo</th>
        <th>Bar</th>
      </thead>
      <tr>
        <td>Baz</td>
        <td>Qux</td>
      </tr>
    </table>
  </div>
</div>

Если вы запустите его в Chrome (и большинство браузеров, fwiw), вы получите следующее:

Но в Safari 13.0.2 на macOS это выглядит так:

Answer 1

Благодаря @Michael_B я теперь понимаю, что таблица работает довольно необычно с использованием стилей flexbox.

• Почему flex-box работает с div, а не с таблицей?

Кажется, я должен использовать width: 100% вместо flex-grow: 1. Это не конец света, поскольку таблица находится на самом глубоком уровне в иерархии dom, но это все еще облом.