Take the following example: <!DOCTYPE html> <flexbox> <item>foo</item> <item>foo</item> </flexbox> <style> body * { padding: 2px; margin: 2px; background: rgba(0,0,0,.2); } flexbox { display: flex; flex-flow: column; max-height: 30px; } item { display: block; height: 50%; min-height: 0; } </style> <http://software.hixie.ch/utilities/js/live-dom-viewer/saved/3733> As far as we can tell, the max-height shouldn't matter here. The available space in the vertical axis is infinite, so the item's %s should resolve to auto as specified in CSS 2.1, same as in block layout. <http://www.w3.org/TR/CSS21/visudet.html#the-height-property> <http://www.w3.org/TR/CSS21/visudet.html#min-max-heights> But for some reason, both Chrome and Firefox agree that the items are 15px tall (modulo padding/etc). This seems like reasonable, useful behavior, but we can't find a justification for it in the flex layout algorithm. Can one of the implementors explain how they got this behavior? We need to know where in the algo to spec this, so we can apply the same behavior to Grid. See also the originating thread at <https://lists.w3.org/Archives/Public/www-style/2015Sep/0297.html> ~TJ and fantasaiReceived on Thursday, 5 November 2015 00:28:16 UTC
This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:52:28 UTC