html - IE 11 not aligning Flexbox properly -

the following works fine chrome , 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, bottom div overlaps top div. ways fix this?

js fiddle here: http://jsfiddle.net/fwfa6/

thanks, arun

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

this shorthand flex-grow, flex-shrink , flex-basis combined. second , third parameters (flex-shrink , flex-basis) optional.

default 0 1 auto.

so change style (default giving example, can check other values 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 question here why there difference between css property flex: 0 1 1 , flex: 0px 1 1

i quote boltclock's answer

the component of flex shorthand accepts length value flex-basis.

in declaration flex: 0px 1 1, you're explicitly assigning 1 length value: 0px. assigned flex-basis. declaration equivalent to:

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

the declaration flex: 0 1 1, on other hand, ambiguous, because 0 possible value of flex-grow. first 2 values potentially assigned flex-grow , flex-shrink so:

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

but leaves last 1 value unitless, invalid css.

now, might ask why parser couldn't determine 0 value among 3 parsed length , behave accordingly. because spec states (at end of section):

a unitless 0 not preceded 2 flex factors must interpreted flex factor. avoid misinterpretation or invalid declarations, authors must specify 0 <‘flex-basis’> component unit or precede 2 flex factors.

this resolves ambiguity earlier.

also read comments below question, boltclock reported bug chrome https://code.google.com/p/chromium/issues/detail?id=380984