A fixed-layout table at 100% width expands to 800,000px when in a flex-flow: column wrap

Example URL:
https://jsfiddle.net/zhv79eub/14/

Steps to reproduce the problem:
1. Have a flexbox container with `flex-flow: column wrap`.
2. Create multiple items such that a wrap occurs.
3. If one of the items is a div with a table which has `width: 100%` and `table-layout: fixed`, it will expand to become ~800,000px wide instead of a reasonable size.

What is the expected behavior?
From a UI perspective, the table should be a sane size - either the width of a single column prior to wrapping or however big it needs to be to fit the content (i.e., table-layout: auto).

What went wrong?
Each table grows to be enormous (800k pixels).

The table has a width of 100%, so it's possible there is some broken loop where the container's width is 'as big as needed' and each table effectively grows as large as it can before hitting some weird maximum?

Does it occur on multiple sites: Yes


This very same bug was reported for chrome in https://bugs.chromium.org/p/chromium/issues/detail?id=876749
It was fixed there by changing ChildIntrinsicLogicalWidth to use fit-content instead of max-content

There are two WPT tests for this at:
http://wpt.live/css/css-flexbox/flex-wrap-002.html
http://wpt.live/css/css-flexbox/flex-wrap-003.html

The first one its currently failing on WebKit