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

Status : 

 


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

Description

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 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.
http://codepen.io/boostnewmedia/pen/kvtoF

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:
http://philipwalton.github.io/solved-by-flexbox/demos/media-object/
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