Why Does My Flex Container's `min-height` Get Ignored in Internet Explorer 10 and 11?

Flex Container's Overlooked Minimum Height in Internet Explorer

Despite the widespread support for standardized flexbox properties, Internet Explorer 10 and 11 exhibit peculiar behavior when it comes to flex containers. One such issue arises with the min-height property being ignored.

Consider a container div containing two child divs, each having a maximum height of 400px. Utilizing CSS flex properties, justify-content: space-between; is intended to evenly distribute the vertical space between the child divs. However, this alignment works flawlessly in Chrome and Firefox but not in Internet Explorer.

The solution lies in setting the flex container itself as a flex item. By simply adding display: flex; and flex-direction: column; to the body element, the container's min-height property is respected in Internet Explorer 10 and 11. This ensures proper space distribution between the child divs.

This workaround addresses the flexbox bug specific to Internet Explorer versions 10 and 11, ensuring consistent behavior across modern browsers. Further details on this issue can be found at https://github.com/philipwalton/flexbugs#flexbug-3.

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