- From: Emil Björklund <bjorklund.emil@gmail.com>
- Date: Fri, 22 Aug 2014 17:08:57 +0200
- To: "Tab Atkins Jr." <jackalmage@gmail.com>
- Cc: www-style list <www-style@w3.org>
- Message-ID: <CAPsQUpLdbD56oMFdNbP-Ro5b17GLaJ8ZXBWX6VLyjUUb0Nvm+g@mail.gmail.com>
Thanks for the feedback, Tab. > > Shouldn't that mean that the default case actually is what I expect it to > > be, i.e. that the item stretches to fill its grid area vertically? If > not, > > since the grid item is obviously bounded by the grid lines: what is then > > being stretched by default? > > This appears to be a Chrome bug. It struck me too, just recently, > when I tried to use it. I suggest reporting it so it can be fixed. > Cool - already in touch with some of the guys implementing in Chrome and WebKit - it seems the alignment stuff isn't done yet, so it defaults to "start" for now. I hade mistakenly noted that the IE implementation does the same thing (it doesn't). > > The second thing that struck me as counter-intuitive is that columns > sized > > with percentages on a grid container without an explicitly declared width > > won't get sizes according to a percentage of the grid container width, > but > > compute to "auto" width. In my example, I used the <body> element as the > > grid container, and wanted empty "spacer" columns on the side of the > actual > > contents, but they collapsed (to nothing, as they had no items/content). > I > > had to set "width: 100%" on the <body> element for them to get rendered, > > which felt superflous. > > I suspect another bug. Percentages generally are able to resolve > against a "fill" width on blocks; there's no good reason they > shouldn't work as you expect here. (In some cases they can't resolve, > when the size of the element depends on the size of the content, but > that's not the case for widths in "block" contexts by default.) > Good to know, I'll make sure to file that one. > > > Somewhat in the same vein, I tried to achieve a "sticky footer" effect by > > declaring a min-height of 100vh on the <body> element (my grid > container), > > and setting the main row of content to "minmax(1fr, max-content)"; that > too > > failed: the grid inside the body element shrunk as the 1fr computed to > > "auto", and only worked when I set an explicit "height: 100%" on the > > container (<body>). (Using the same general idea with a flexbox column > and > > the main content box with "flex: 1" works with only min-height, for > > example.) > > That's intentional - fr units only work in the "max" side of a > minmax(). This is a consequence of the grid layout algorithm. > > In similar flexbox layouts, you also have to set a "height: 100%;" on > the <html> and <body> elements. > Oh, I didn't know that about the flexbox "sticky footer". min-height: 100vh works in Chrome, WebKit and Firefox but not IE, (which has some bugs with column flexboxes, it seems) and, strangely, Opera on Blink. Thanks again! //emil
Received on Friday, 22 August 2014 15:09:45 UTC