为什么不灵活增长：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）中运行它，则会得到以下提示：

但是在macOS上的Safari 13.0.2中，就像这样：

Answer 1

由于@Michael_B，我现在了解到该表在flexbox样式中的工作方式非常特殊。

• Why does flex-box work with a div, but not a table?

似乎我必须使用width: 100%而不是flex-grow: 1。这不是世界末日，因为该表位于dom层次结构中最深的级别，但它仍然令人um目结舌。