Min-height and flexbox (flex-direction:column) don't work together in IE 10 & 11-preview. - by philipwalton

Status : 

  Won't Fix<br /><br />
		Due to several factors the product team decided to focus its efforts on other items.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.

ID 802625 Comments
Status Closed Workarounds
Type Bug Repros 14
Opened 9/27/2013 8:28:15 AM
Access Restriction Public


In all other browsers that support flexbox, a `flex-direction:column` based flex container will honor the containers `min-height` to calculate `flex-grow` lengths. In IE10 & 11-preview it only seems to work with an explicit `height` value.
Sign in to post a comment.
Posted by Microsoft on 10/26/2015 at 9:31 AM
Thank you for the feedback. This issue appears to have been fixed in Microsoft Edge. We're not presently working on feature bugs in Internet Explorer outside of security-related issues.
Best Regards,
The Microsoft Edge Team
Posted by Eswar Prasad M on 10/20/2015 at 7:55 AM
May I know if the below flexbox issues are fixed in IE11? If yes are there any known IE11 Flexbox related issues? I am facing a Flexbox issue in IE11 for cramped frames while resizing the windows
Posted by flanneljesus on 5/17/2015 at 12:04 PM
I just realized that the layout I've had on my site for months is broken on IE when the content doesn't force the height to be over 100% of the window height. Very disappointing. I was starting to talk about IE being just as good as everyone else. Very sad.

Hope this gets fixed soon. Flexbox is a godsend to web design and it should be taken seriously by the browsers. We, the developers, need it to work.
Posted by Homestar on 10/30/2014 at 11:29 AM
@dstorey will there be a patch for IE versions 10 and 11 or will this fix be implemented in IE 12?
Posted by dstorey [MSFT] on 8/28/2014 at 9:14 AM
This has been fixed internally.
Posted by Andrei Gonzales on 7/10/2014 at 10:10 AM
Tested this thoroughly today. The bug is a height implementation issue: IE10+ needs the height to be explicitly set in order to set anything vertically. Ergo, if the flexbox container is something like:

height: auto;
min-height: 100% !important;

The children will not be able to vertically center-align, or even follow the vertical start-end, regardless of the flex-direction.

@IE Team: is there a time frame as to when this will be fixed? This isn't even a major task requiring a team. IE simply isn't calculating the height correctly. I'm sure you guys have at least ONE engineer that can sit down and fix this, right?
Posted by JunlinZ on 5/13/2014 at 12:03 PM
A possible fix in Internet Explorer for this issue has been identified.
Posted by MikeTee1111111 on 4/10/2014 at 8:48 PM
Rollback to IE10.

Flex works fine.
Posted by MikeTee1111111 on 4/10/2014 at 8:41 PM
Hello Microsoft,

I have just attached an image which shows the differences in other browsers and IE 11 / Edge.

This site flex layout site acts weirdly in the latest browser.

If a parent element is a flex item ( display: flex; ) , the child ( image ) item stays the original fixed image height, and doesn't respond to height: auto;

This essentially makes responsive website not usable.

Once display: flex; is turned off, height: auto; and the auto resize works.
Posted by homertbush on 3/28/2014 at 5:14 PM
One of the issues that was troubling us (for non nested flexboxes), was that if the flex container (with display:flex) wasn't using height/width:100% (e.g. had min-height, min-width) the flex items (with e.g. flex:1) wouldn't size correctly unless they had explicit heights. This works on all browsers except IE. I'd suggest putting height/width instead of min-height, min-width properties on all your flex containers.
Posted by homertbush on 3/28/2014 at 4:50 PM
I'm also experiencing this issue. A little disappointing that MS removes the -ms vendor prefix from flexbox...but still can't render a basic version of one. Yet another work around specific for IE.
Posted by PhilippeGauthier on 11/19/2013 at 8:06 PM
Having the same issue here. It's the same whether you use explicit values like pixels / ems or percentages.
Posted by philipwalton on 11/15/2013 at 11:20 PM
Yeah, based on my "solved by flexbox" site, it seems like most of the bugs are due to nested flexboxes. Here's a really good example:
Posted by lerouxb on 11/13/2013 at 5:58 AM
I've been trying to pin this down and it appears to also relate to nesting flexbox containers.
See here for a test case: http://codepen.io/lerouxb/pen/jIkpD
Posted by Microsoft on 10/3/2013 at 7:05 AM
Thank you so much for the feedback.

Unfortunately, we are not able to address this feedback in our upcoming release. We will consider your feedback for a future release. We will keep this connect feedback bug active to track this request.

Every piece of feedback we receive is important to us and helps us improve the quality of Internet Explorer. We continue to welcome more feedback, so please don't hesitate to report other ways that we can improve Internet Explorer.

Best regards,
The Internet Explorer Beta Team
Posted by Microsoft on 10/1/2013 at 2:12 PM
Thank you for your feedback. We will be investigating this issue further.

Best regards,

The Internet Explorer Team