- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Fri, 15 May 2015 13:52:12 -0700
- To: fantasai <fantasai.lists@inkedblade.net>
- Cc: "www-style@w3.org" <www-style@w3.org>
On Sun, May 10, 2015 at 9:58 PM, fantasai <fantasai.lists@inkedblade.net> wrote: > Consider: > * a column flexbox > * a single-column grid > containing the same contents (two bits of content of 100px height) > and flex values (first item at 1, second at 2) Markup examples, to help visualize: <div style="display: flex; flex-flow: column;"> <div style="flex: 1;">100px-high worth of content</div> <div style="flex: 2;">100px-high worth of content</div> </div> vs <div style="display: grid; grid: auto / 1fr 2fr;"> <div style="grid-row: 1;">100px-high worth of content</div> <div style="grid-row: 2">100px-high worth of content</div> </div> > Flexbox (per implementations) will lay out the column at 200px height, > whereas Grid (per spec) will lay out the column at 300px height. Specifically, Grid "reverses" flex relationships when auto-sized, so they maintain the correct ratio. Flexbox doesn't, when shrinkwrapped (as height is); you just end up with no available space, and so 'flex' has no effect. > They should probably behave the same way. > > Also, it would be nice to be able to get both behaviors. Perhaps > a min-content height is the flexbox interpretation and a max-content > height is the grid interpretation and 'auto' uses its min-content > interpretation for flex/grid containers? ~TJ
Received on Friday, 15 May 2015 20:53:00 UTC