- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 4 Nov 2015 16:27:24 -0800
- To: www-style list <www-style@w3.org>
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 fantasai
Received on Thursday, 5 November 2015 00:28:16 UTC