Why Is My Flex Container's `min-height` Ignored in IE, and How Can I Fix It?

Flex Container's Min-Height Ignored in IE

IE browsers have a notorious history with flexbox rendering. Among these issues, min-height emerges as a peculiar concern for flex containers. Despite the standard's expectations, IE10 and IE11 disregard the min-height property.

Consider a scenario where a container div houses two child divs. The children are less than 400px in size, ensuring ample space for justify-content: space-between. The goal is to align the first child at the top and the second at the bottom. This setup functions flawlessly in Chrome and Firefox, but not in IE.

The root of this problem lies in a specific flexbox bug (Flexbug 3). To resolve this, a simple workaround transforms the flex container into a flex item itself. This can be achieved by adding the following CSS rule:

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

Incorporating this CSS will solve the issue without any further modifications.

For further exploration, consult the official Flexbug repository: https://github.com/philipwalton/flexbugs#flexbug-3. This repository provides insights into various flexbox bugs and offers effective workarounds.

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