[css-flexbox] IE's flexbox bug & unsufficiently clear spec

Hi,

While making tests, I just found (what I think is) a bug in IE’s implementation of flexboxes: absolutely positioned flexboxes have an available main space of 100vw and not an infinite one.

That being said, I can understand such mistake was made considering the text of the spec:

| Determine the available main and cross space 
| for the flex items. 
| 
| For each dimension, if that dimension of the
| flex container’s content box is a definite size,
| use that; 
| 
| Otherwise, subtract the flex container’s margin,
| border, and padding from the space available to
| the flex container in that dimension and use that
| value. [This might result in an infinite value.]
| 
| For example, the available space to a flex item in a
| floated auto-sized flex container is: 
| • the width of the flex container’s containing block 
| minus the flex container’s margin, border, and 
| padding in the horizontal dimension. 
| • infinite in the vertical dimension
 
While it seems rather common for the platform to have an "infinite available size" for positioned elements, it is not very clear from the current wording only. To make sure the mistake doesn't end up being made again, could we maybe add some example focusing on this specific case?

Thanks!
François

_______________________________________________________________
Test case:

<div style="display:flex; position: absolute; top: 0px; left: 0px;">
    <div style="width: 100vw; height: 100vh; background: green;"></div>
    <div style="width: 100vw; height: 100vh; background: red;"></div>
    <div style="width: 100vw; height: 100vh; background: orange;"></div>
</div>

<style>
    :root { overflow-y: hidden; }
</style>

_______________________________________________________________

PS: I'll report the bug on Microsoft Connect once this mail is archived, so I can reference to it.

Received on Saturday, 27 September 2014 08:01:02 UTC