The engines differ greatly when it comes to sizing of table flex items. Edge and Firefox, on one hand, seem to use the table sizing algorithm extensively, and there's generally no support for flexing.
<p>There should be a green square, and no red.</p>
<div style="display:flex; width:200px; background:red;">
<div style="display:table; flex:1 1; width:10px; height:200px; background:green;"></div>
</div>
Chrome, on the other hand, leave the flex sizing algorithm in charge, and the above test passes.
I'm pretty sure Chrome is doing the right thing here, but it causes a compatibility problem, if the specified main size is less than the intrinsic minimum width of the table.
<p>Shouldn't there be a green square, and no red?</p>
<div style="display:flex; width:200px; background:red;">
<div style="display:table; width:10px; height:200px; background:green;">
<div style="width:200px; height:10px; background:green;"></div>
</div>
</div>
See https://bugs.chromium.org/p/chromium/issues/detail?id=821832
What's the desired behavior? Invalid bug? Ignore specified main size when resolving min-width:auto (initial value), and only honor intrinsic minimum width?
Fun fact: Both above tests pass in Presto. :)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3