Why Does An Image That Scales Up Overflow Past max-height?

Question

EDIT #1

This seems to be an issue with the size of the image and how it scales up or down. Also, this behavior is coupled closely with the image being square; the width and height being equated/interchanged.

When the inherent dimensions of the image are smaller than the min-height, the image container will only accommodate a min-heights worth of width for the image, forcing it to overflow. Once the inherent image dimensions become larger than the max-height, the image container expands to fit the image.

Bonus conundrum: When put into a vertical flexbox, the copy container overflows instead of the image container. (click on boxes in snippet to switch) Here's the same example in Codepen

document.querySelector('main').addEventListener('click', function(e) {
    this.classList.toggle('col');
}, true);

main {
    display: flex;
}
main.col {
  flex-direction: column;
}

section {
    display: flex;
    margin: 2rem;
    background: rgba(0,255,255); // cyan
}

.icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

img {
    display: block;
    height: 100%;
    min-height: 1rem;
    max-height: 4rem;
    width: auto;
    opacity: 0.5;
}
.copy {
    background: rgba(255,255,0,0.5);
}


html,
body {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

<main class="col">
    <section>
        <div class="icon">
            <img src="https://picsum.photos/1/1"/>
        </div>
        <div class="copy">
            blah<br>
            blah<br>
            blah<br>
            blah<br>
            blah
        </div>
    </section>
    <section>
        <div class="icon">
            <img src="https://picsum.photos/40/40"/>
        </div>
        <div class="copy">
            blah<br>
            blah<br>
            blah<br>
            blah<br>
            blah
        </div>
    </section>
    <section>
        <div class="icon">
            <img src="https://picsum.photos/80/80"/>
        </div>
        <div class="copy">
            blah<br>
            blah<br>
            blah<br>
            blah<br>
            blah
        </div>
    </section>
</main>

---

ORIGINAL

I have a flexbox with an image on the left and copy on the right. I want the image to maintain aspect ratio based on height (thus using width: auto). I also want to limit the height of the image, both min and max. But, if the copy side gets taller than the max-height of the image, the "auto width" of the image is ignored and overflows its container. Why doesn't the left side of the flex expand width to contain the image?

main {
  display: flex;
  background: rgba(0,255,255);
}

.image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  display: block;
  height: 100%;
  min-height: 3rem;
  max-height: 4rem;
  width: auto;
  background: rgba(255,0,255,0.5);
}

.copy {
  background: rgba(255,255,0,0.5);
}

<main>
  <div class="image">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/1x1.png"/>
  </div>
  <div class="copy">
    blah<br>
    blah<br>
    blah<br>
    blah<br>
    blah
  </div>
</main>