CODEWITHSUNDEEP
htmlcssinternet-explorer-11
Arun
Arun

Reputation: 3077

IE 11 not aligning Flexbox properly

The following works fine with Chrome and FF

<div style="display:flex; flex-direction:column;">
    <div style="flex:1">
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
    </div>
    <div>Bottom</div>
</div>

However in IE 11, the Bottom DIV overlaps the top DIV. Any ways to fix this?

JS Fiddle here: http://jsfiddle.net/fwfA6/

Thanks, Arun

Upvotes: 2

Views: 1008

Answers (1)

4dgaurav
4dgaurav

Reputation: 11496

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional.

Default is 0 1 auto.

So change your style to (default for giving example, you can check with other values as well)

flex:0 1 auto

like

<div style="display:flex; flex-direction:column; min-height:100%">
    <div style="flex:0 1 auto">
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
        Top<br />
    </div>
    <div style="flex:0 1 auto">Bottom</div>
</div>

Demo

From my question here Why is there a difference between css property flex: 0 1 1 and flex: 0px 1 1

I quote the Boltclock's answer


The only component of the flex shorthand that accepts a length as a value is flex-basis.

In the declaration flex: 0px 1 1, you're explicitly assigning one length value: 0px. This will always be assigned to flex-basis. This declaration is equivalent to:

flex-basis: 0px;
flex-grow: 1;
flex-shrink: 1;

The declaration flex: 0 1 1, on the other hand, is ambiguous, because 0 is a possible value of flex-grow. The first two values could potentially be assigned to flex-grow and flex-shrink like so:

flex-grow: 0;
flex-shrink: 1;

But that leaves the last 1 value unitless, which is invalid CSS.

Now, you might ask why the parser couldn't just determine that 0 is the only value among the three that could be parsed into the length and behave accordingly. That is because the spec states (at the very end of that section):

A unitless zero that is not already preceded by two flex factors must be interpreted as a flex factor. To avoid misinterpretation or invalid declarations, authors must specify a zero <‘flex-basis’> component with a unit or precede it by two flex factors.

This also resolves the ambiguity earlier.

Also read comments below to the question, Boltclock reported a bug to chrome https://code.google.com/p/chromium/issues/detail?id=380984

Upvotes: 1

Related Questions