IE11下Flexbox布局异常问题求助

Hey there! I’ve dealt with my fair share of IE11 flexbox headaches, so let’s break down what’s likely going on here and how to fix it. IE11 has a notoriously buggy flexbox implementation—even with all the prefixes, there are edge cases that trip up even well-written code.

Key IE11 Flexbox Bugs Impacting Your Code #

1. Min-height on flex containers isn’t respected by child elements: IE11 doesn’t use the min-height value of a flex container as a reference for its flex children’s height calculations. Your section uses min-height: 100vh, which means child flex items (like your project grid) might not expand as expected.
2. Flex-basis percentage requires explicit parent width: When using flex-basis: 30% on your grid items, IE11 needs a clear width on the parent container (your .grid element) to calculate the percentage correctly. Without it, the value might be ignored.
3. Min-height on flex child images doesn’t behave as expected: IE11 struggles with min-height on elements inside flex columns, especially when combined with percentage-based sizing.

Step-by-Step Fixes #

Let’s adjust your CSS to work around these bugs:

1. Fix the Section Flex Container

Update your section styles to ensure IE11 recognizes the height context:

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 60px 50px;
  min-height: 100vh;
  /* Add these lines to fix height context for IE11 */
  height: auto; /* Fallback for content that overflows viewport */
  overflow: auto; /* Allow scrolling if content exceeds viewport */
  /* Optional: If you don't need content to overflow, use height: 100vh instead */
}

2. Fix Grid Item Sizing

Ensure your grid items have a clear width and flex behavior that IE11 understands:

#projects .grid li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-preferred-size: 30%;
  flex-basis: 30%;
  /* Add explicit width for IE11 percentage calculation */
  width: 30%;
  /* Let items grow to fill available space in the grid */
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

3. Fix Thumbnail Image Behavior

Adjust the thumbnail to properly respect min-height in IE11:

#projects .thumbnail-img {
  max-width: 100%;
  max-height: 100%;
  min-height: 235px;
  padding: 0 30px 25px;
  /* Ensure image maintains aspect ratio while filling min-height */
  object-fit: contain;
  /* Let the image take up available space in the flex column */
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

Additional Notes #

• Make sure your .grid parent element (the <ul> wrapping your <li> items) has display: flex set, along with flex-wrap: wrap and width: 100%—this is critical for IE11 to calculate the 30% width of your grid items correctly.
• If you’re still seeing issues, try removing min-height from the image and instead set a fixed height temporarily to test if IE11 is recognizing the sizing context.

内容的提问来源于stack exchange，提问作者Tim Wörner