Home > Web Front-end > CSS Tutorial > Why Is My Flex Container's `min-height` Ignored in IE10 and IE11?

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

Mary-Kate Olsen
Release: 2024-12-02 22:48:15
Original
354 people have browsed it

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;
}
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template