W3C home > Mailing lists > Public > www-style@w3.org > August 2014

[css-align][css-grid] IE's interpretation of stretch?

From: François REMY <francois.remy.dev@outlook.com>
Date: Tue, 26 Aug 2014 16:25:09 +0200
Message-ID: <DUB130-DS1F2712F3A242E06CAE433A5DC0@phx.gbl>
To: "CSS WG" <www-style@w3.org>
Dear CSS Align / Grid editors,

I’m currently wondering whether I’m currently facing a bug or a feature in IE’s behavior towards items stretched in undersized grid rows. 

It seems that, when an element’s intrinsic height is higher than the stretchable area, IE ignores the stretch instruction. Is that part of any spec, or is this a bug? 

[1] According to the latest CSS Align working draft, the only exception to stretch seems to be “min-height >= available size”, but IE keeps its behavior even if I set min-height to 0, so this doesn’t explain what I’m seeing. 
[2] According to the latest CSS Align editor draft, stretching only applies when the items are smaller than the available size, so that would explain the visible behavior, but the fallback behavior for cases where there is no auto-sized element clearly doesn’t make sense for a content-distribution value; it also doesn’t seem to mention whether max-width/max-height have to be honored and, if they do, what should be done in the case they prevent the space to be distributed among the items.

So, could someone explain to me what is the current plan for the stretch value? It seems to be in flux right now, but I would like to understand where it is currently going ^_^

Thanks a lot,
François

-------------------------------------------------------------------------------

PS: Here’s a test case to show the issue. IE renders as the first image, and I thought it would render like the second one.

<!doctype html>
<html>
    <head>
        <title>Test for stretch and small elements</title>
    </head>
    <body>
        <div style="display: -ms-grid; -ms-grid-rows: 10px auto; -ms-grid-columns: 1fr">
            <input type="button" value="1" style="-ms-grid-row: 1; -ms-grid-row-span: 1; width: 50%; margin: 0px auto; margin-left: 0px" />
            <input type="button" value="2" style="-ms-grid-row: 1; -ms-grid-row-span: 2; width: 50%; margin: 0px auto; margin-right: 0px;" />
        </div>
    </body>
</html>

IE’s rendering:


Expected rendering:

image_8_.png
(image/png attachment: image_8_.png)

image_7_.png
(image/png attachment: image_7_.png)

Received on Tuesday, 26 August 2014 14:25:40 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:45 UTC