Flexbox, flexible direction: column, image and IE11 error. Can this be solved?

Question

I have <ul>one that is display: flexhorizontal. Each <li>has a width of 25%, and also display: flexto get all equal heights.

Each <li>contains an anchor, which is a column display: flex, to properly align elements, including the container and the image of the main image. In every browser, including IE10, this is absolutely normal, no problem. However, in IE11, this starts with problems.

IE11 calculates the height of the image container as the actual height of the original image, not the height of the image when rendering. The result is <li>much, much higher than it should be.

What the layout looks like in every self-respecting browser:

IE11:

, , , . JS, , . - , , , Flexbugs.

* {
      box-sizing: border-box;
    }

    img {
      display: block;
      width: 100%;
    }

    .promotions-list {
      background-color: #eaeaea;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      padding: .5rem 1rem;
      width: 960px;
    }
    .promotions-list__item {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      padding: 1rem;
      width: 25%;
    }
    .promotions-list__link {
      background-color: white;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1 1 auto;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow: hidden;
      padding: 1em;
      position: relative;
      width: 100%;
    }
    .promotions-list .image-container {
      display: block;
      height: auto;
    }
    .promotions-list .image-container img {
      display: block;
      margin: 0 auto;
      max-width: 40%;
    }

<ul class="promotions-list">
        <li class="promotions-list__item has-image">
            <a href="/promotion/358/the-new-l5000-mono-laser-range-from-brother" class="promotions-list__link" title="Link to The NEW L5000 Mono Laser Range from Brother details">
                <span class="promotions-list__item__header">
                    <span class="image-container">
                        <img src="//cdn.2020prosoftware.com/installations/1/promotions/358/original/NewModel2016.png">
                    </span>

                <span class="list__item__title">The NEW L5000 Mono Laser Range from Brother</span>
                </span>

                <span class="promotions-list__item__body">
                    <span class="description">The NEW standard in reliability! Introducing new, improved printers from Brother, the market leader…</span>
                </span>
            </a>
        </li>
    </ul>

Hide result

Answer 1

, -, flex: 0 0 auto .promotions-list__item__header.

* {
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
}

.promotions-list {
  background-color: #eaeaea;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: .5rem 1rem;
  width: 960px;
}
.promotions-list__item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 1rem;
  width: 25%;
}
.promotions-list__link {
  background-color: white;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  padding: 1em;
  position: relative;
  width: 100%;
}
.promotions-list .image-container {
  display: block;
  height: auto;
}
.promotions-list .image-container img {
  display: block;
  margin: 0 auto;
  max-width: 40%;
}

/* Added */
.promotions-list__item__header {
  flex: 0 0 auto;
}

<ul class="promotions-list">
    <li class="promotions-list__item has-image">
        <a href="/promotion/358/the-new-l5000-mono-laser-range-from-brother" class="promotions-list__link" title="Link to The NEW L5000 Mono Laser Range from Brother details">
            <span class="promotions-list__item__header">
                <span class="image-container">
                    <img src="//cdn.2020prosoftware.com/installations/1/promotions/358/original/NewModel2016.png">
                </span>

                <span class="list__item__title">The NEW L5000 Mono Laser Range from Brother</span>
            </span>

            <span class="promotions-list__item__body">
                <span class="description">The NEW standard in reliability! Introducing new, improved printers from Brother, the market leader…</span>
            </span>
        </a>
    </li>
</ul>

Hide result