为什么 flex-grow: 1 不适用于 Safari 中的表格？答案

【问题标题】：Why doesn't flex-grow: 1 work for a table in Safari?为什么 flex-grow: 1 不适用于 Safari 中的表格？
【发布时间】：2020-02-21 21:04:11
【问题描述】：

这是一个sn-p。

.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 中是这样的：

【问题讨论】：

哪个版本的 Safari 和在什么操作系统上？
你设置宽度100%了吗？
你在桌子上试过table-layout:fixed吗？
我认为您可能会在这篇文章中找到一些指导：Why does flexbox work with a div, but not a table?（注意：关注@Oriol 的回答。虽然我的回答目前获得最高票数，但它只是对那个特殊的问题。Oriol 的回答确实解释了这个问题。）
谢谢@Michael_B，该线程完美地解释了问题和可能的解决方案

标签： html css html-table safari flexbox

【解决方案1】：

感谢@Michael_B，我现在了解到该表格在弹性盒样式中以一种相当奇特的方式工作。

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

看来我必须使用width: 100% 而不是flex-grow: 1。这不是世界末日，因为表在 dom 层次结构中处于最深层次，但它仍然很糟糕。

【讨论】：