html - image is not resizing in a flexbox layout

Question

I tried to follow the advice in this answer, and as shown in this CodePen, but the image that needs to flex is still keeping its original dimensions unless the screen is so narrow it is alone on the row.

There is another set of divs in the real page in a similar situation - it would help the page work across a much larger range of widths if the side divs would shrink.

The div it is wrapped in has flex: auto; on it and img {width: 90%; height: auto;} for any image in it, the parent of that div has style="flex: 0 1 250px;" on it.

Here is a CodePen of it.

I guess there is a simple mistake, if not I suppose I'll make the image the background of the div it is currently in, and set background-size: 100% auto; on it.

section {
  padding: 15px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 3vw;
  margin-left: 6vw;
}
.outerDiv {
  background-color: rgba(50, 50, 0, 0.5);
}
.innerDiv {
  background-color: rgba(10, 10, 10, 0.6);
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  margin: 15px;
}
.innerDiv p {
  padding: 6px 18px 0 15px;
}
.imgResize {
  flex: auto;
  align-self: center;
  padding: 15px;
}
.imgResize img {
  width: 90%;
  height: auto;
}

<section>

  <div class="outerDiv">
    <div class="innerDiv" style="flex: 0 1 250px;">
      <h2>The Rocket Equation</h2>
      <p>Mass ratio:</p>
      <div class="imgResize">
        <a href="rotovator.html">
          <img src="http://www.moonwards.com/img/animatedRotovatorLink.png">
        </a>
      </div>
    </div>
  </div>

  <div class="outerDiv">
    <div class="innerDiv">
      <h2>Suborbital Hop</h2>
      <img src="http://www.moonwards.com/img/mapmini.jpg" width="512" height="256">
      <canvas id="subOrbitalCanvas" width="512" height="256"></canvas>
    </div>
  </div>

</section>

Answer 1

An initial setting on flex items is min-width: auto. This means that a flex item, by default, cannot shrink below the size of its content.

In this case, the section element is the primary flex container.

The flex items are .outerDiv.

Because these flex items contain images, they cannot shrink below the image's size. To overcome this, override the default with min-width: 0.

revised codepen

Okay, so now the item can shrink past the content, but the image is still inflexible.

You can fix that with:

img { width: 100%; height: auto; }

revised codepen

Here's more information: Why doesn't flex item shrink past content size?