Flex in IE11: width100% not working with nested flex and direction 'column'

Question

I need an image in nested flex containers to have width 100%, but this doesn´t work in IE11 when the container has flex-direction: column. I tried:

img {
    width: 100%;
    max-width: calc( 100% - 0.1px );
}

but this also doesn't work. Any ideas?

section, .articles-wrapper, .article-wrapper {
  display: flex;
}
.article-wrapper {
  flex-direction: column;
}
img {
    width: 100%;
}

html:

<section>
  <div class="articles-wrapper">
    <div class="article-wrapper">
      <img src="http://via.placeholder.com/600x150">
    </div>
  </div>
</section>

Answer 1

Have you inspected the page to see how the elements are laid out?

The image actually is taking up 100% of it's parent's width, because by default flex-items are not allowed to grow to fill the flex container but expand only enough to display their content.

Both the .articles-wrapper and .article-wrapper elements need to be explicitly allowed to grow, either by specifying flex-grow: 1; or using the shorthand property flex with one of several values:

.articles-wrapper, .article-wrapper {
    flex: auto; /* shorthand for flex: 1 1 auto; */
}

OR

.articles-wrapper, .article-wrapper {
    flex: 1; /* shorthand for flex: 1 1 0%; */
}

As you get deeper into using flexbox, I recommend keeping Philip Walton's Flexbugs repo at hand which lists common bugs for all browsers as well as workarounds for each.

EDIT Michiel: flex: 1 works in IE11, except that the aspect ratio is not maintained when the window is scaled to a smaller size than the image size. This 'feature' is documented in Flexbugs #5, and can be solved by adding a non-flex wrapper:

<section>
  <div class="articles-wrapper">
    <div class="article-wrapper">
      <div> <!-- ADDED NON-FLEX WRAPPER -->
        <img src="http://via.placeholder.com/600x150">
      </div>
    </div>
  </div>
</section>