Why Does IE Ignore My Flex Container's `min-height` Property?

IE Ignoring Flex Container's Minimum Height

In Internet Explorer 10 and 11, flex containers can exhibit unexpected behavior when it comes to the min-height property. While flex containers should adhere to the defined minimum height, IE browsers ignore it.

To address this issue, a workaround exists by making the flex container a flex item itself. By adding the following code to your CSS:

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

you effectively transform the entire page into a flex container. This enables the flex container to respect the min-height property in IE while maintaining the intended layout.

Example:

Consider a flex container with two child divs where the container has a minimum height of 400px and the child divs are not larger than 400px. In Chrome and Firefox, the layout would be as expected with one child at the top and the other at the bottom. However, in IE, the container would collapse to the height of its contents, ignoring the min-height property.

Solution:

To resolve this issue, implement the workaround by making the body a flex container. The modified code would look like:

<div>

The above is the detailed content of Why Does IE Ignore My Flex Container's `min-height` Property?. For more information, please follow other related articles on the PHP Chinese website!