Why doesn't flex-grow: 1 work for a table in Safari?

Question

Here's a snippet.

.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>

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

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

@Awais so with `width: 100%` it works but I'd like to only use flexbox. `flex-grow: 1` should work — Paul Razvan Berg, Oct 25 '19 at 14:52
@Paulie_D just tried now, nothing changed. Afaik `flex: 1` is just the sorthand for `flex: 1 1 0`, which includes `flex-grow: 1` — Paul Razvan Berg, Oct 25 '19 at 14:56
@TemaniAfif tried to set `table-layout: fixed` now, nothing changed. — Paul Razvan Berg, Oct 25 '19 at 14:56
@PaulBerg Not always - https://stackoverflow.com/questions/37386244/what-does-flex-1-mean — Paulie_D, Oct 25 '19 at 15:00
I think that you may find some guidance in this post: [**Why does flexbox work with a div, but not a table?**](https://stackoverflow.com/q/41421512/3597276) (Note: Focus on the answer by @Oriol. Although my answer is currently most highly voted, it amounts to just a hack for that particular question. Oriol's answer really explains the problem.) — Michael Benjamin, Oct 25 '19 at 15:43
Thank you @Michael_B that thread explains the problem and the possible solutions perfectly — Paul Razvan Berg, Oct 25 '19 at 16:38

Paul Razvan Berg · Accepted Answer · 2019-10-25T16:56:55.120

1

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

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

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.

edited Oct 25 '19 at 16:56

answered Oct 25 '19 at 16:46

Paul Razvan Berg

16,949
9
76
114

Why doesn't flex-grow: 1 work for a table in Safari?

1 Answers1

Linked