Why Is My Flex Container's `min-height` Ignored in IE10 and IE11?

Flex Container min-height Ignored in IE

When working with flexbox in IE10 and IE11, you should be able to utilize standardized flex terms. However, a user has encountered an issue where the min-height property of a flex container is not respected in these browsers.

The specified HTML structure features a container div with two child divs, each with variable heights. The goal is to have the first child positioned at the top and the second child at the bottom, with the space between them being evenly distributed using justify-content: space-between.

While this setup works in Chrome and Firefox, it fails in IE. The min-height property is ignored, resulting in the container taking on the height of its tallest child element.

The solution lies in addressing a known issue with IE's rendering of flexbox. As per GitHub's flexbugs documentation (https://github.com/philipwalton/flexbugs#flexbug-3), these browser versions have problems respecting the min-height property for flex containers.

To resolve the issue, simply make the flex container itself a flex item. Modify the CSS as follows:

body {
   display: flex;
   flex-direction: column;
}

This change forces the body element, which contains the container div, to become a flex item. Consequently, the container div is now recognized as a flex subitem within that context, and its min-height property is respected.

The revised JSFiddle demonstrates the solution, with the container now correctly adhering to the specified min-height.

The above is the detailed content of Why Is My Flex Container's `min-height` Ignored in IE10 and IE11?. For more information, please follow other related articles on the PHP Chinese website!