Flexbox, flex-direction: column, image and IE11 bug. Can this be solved?

Question

I have a containing <ul> that is display: flex horizontal. Each <li> is 25% width and also display: flex to get them all equal heights.

Each <li> contains an anchor that is display: flex column, to align the elements within correctly, including the main image container and image. In every browser, including IE10 this is absolutely fine, no issues. However, in IE11 this is where the problems start.

IE11 calculates the image container height as the actual height of the source image, and not the height of the image when rendered. This ends up rendering the <li> much, much taller than it should be.

How the layout looks in every self-respecting browser:

How the layout looks in IE11:

Check out the live example

I know this could be solved by explicitly defining the image height, but I don't want to do that. I could also solve it with JS, but again, I shouldn't have to. Am I missing something with this, as it doesn't appear to be listed on 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>

A very similar question was posted just a few hours before yours. My answer may apply here, as well: http://stackoverflow.com/q/38431915/3597276 — Michael Benjamin, Jul 18 '16 at 16:50
@Michael_B Unfortunately I cannot get your example to work on my layout. — Alex McCabe, Jul 19 '16 at 08:39

score 7 · Accepted Answer · answered Jul 26 '16 at 18:19

This appears to be fixed by setting flex: 0 0 auto on .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>

You little hero you. I could've sworn I tried every iteration of that there was, but obviously not. Thank you! — Alex McCabe, Jul 27 '16 at 08:28

Flexbox, flex-direction: column, image and IE11 bug. Can this be solved?

1 Answers1