为什么不灵活增长:1适用于Safari中的表格? [英] Why doesn't flex-grow: 1 work for a table in Safari?

问题描述

这是一个片段.

.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)中运行它，则会得到以下提示:

If you run it in Chrome (and most browsers, fwiw), you get this:

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

But in Safari 13.0.2 on macOS it's like this:

推荐答案

感谢@Michael_B，我现在了解到该表在flexbox样式中的工作方式非常特殊.

Thanks to @Michael_B, I now understand that the table works in a rather peculiar way with flexbox styling.

• 为什么使用flex-box使用div，但不能使用表格?

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

It seems I must use width: 100% instead of flex-grow: 1. It's not the end of the world, since the table is at the deepest level in the dom hierarchy, but it's still a bummer.

这篇关于为什么不灵活增长:1适用于Safari中的表格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！