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

Fixed Issue #101487

Details

Created
Apr 27, 2014
Privacy
This issue is public.
Found in build #
0.0011
Fixed in build #
15.15002
Reports
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce

URL =

URL:

Repro Steps:

I’ve put together this demo:
http://codepen.io/anon/pen/CmueD

I originally discovered the problem when my flexbox demo site didn’t work in IE 10 or 11-preview:
http://www.browserstack.com/screenshots/64cc98b329d8e5871b0edcf5ecf38f8abf1256a6

Expected Results:

Flex items should be able to flex vertically if either height or min-height is used

Actual Results:

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “Jianyong M.”

      Changed Assigned To from “Jianyong M.” to “IPBS P.”

      Changed Status to “Fixed”

      Changed Assigned To from “IPBS P.” to “Rossen A.”

    • This is marked as fixed - is it in the latest release? I still have issues, particularly when align-self is used by the flex-children

    • I second that this has regressed, as can be confirmed through the aforementioned codepen.

    • Definitely a revived bug, and one without a feasible workaround for large sites.

    • @Kuro something interesting I recently found was to add a pseudo-element in a ::after selector on the element that has this styling applied:

      element[class*=flex-class-with-min-height]::after {
          content: '';
          min-height: inherit;
          font-size: 0;
      }
      

      Credit to arsentver on Github.

      Can a developer from MS explain why this works?

      I think I can appreciate that the child element is filling the parent element, but why does it not conflict/compete for space? I have other questions, too, but I’ll let you guys figure that out.

      Either way - the above works; oddly enough.

      This issue needs to be reopened.

    You need to sign in to your Microsoft account to add a comment.

    Sign in