Flexbox on table doesn't work in Firefox

Question

Using flexbox to control the layout of a table works in webkit browsers but in Firefox, s only render as wide as their own content.

Demonstrat

Answer 1

I believe the issue involves the default display value of your flex items.

If you override it with display: flex the layout should work as intended across browsers.

Make the following adjustments:

td:first-child  { display: flex; }
td:nth-child(2) { display: flex; }
td:nth-child(3) { display: flex; }

Revised Codepen

My first thought was to make sure each td had the proper display value applied – something along the lines of display: flex-item. However, flex-item doesn't exist, so I used display: flex.

---

EDIT

The solution above stands. This edit pertains to the explanation.

On examination of the spec, it appears that flex items don't even have a default display value. Basically, once you make the parent a flex container, the children become flex items, and accept flex properties, regardless of any display rule applied. Hence, a default display rule is not necessary.

In this case, it seems that having to declare display: flex on the flex items is a quirk necessary to get Firefox and IE to work.