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

Fixed Issue #101487


Apr 27, 2014
This issue is public.
Found in build #
Fixed in build #
Reported by 4 people

Sign in to watch or report this issue.

Steps to reproduce



Repro Steps:

I’ve put together this demo:

I originally discovered the problem when my flexbox demo site didn’t work in IE 10 or 11-preview:

Expected Results:

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

Actual Results:


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