Shrinking when grows and keeping aspect ratio with flex-box

Question

I have a static height container.

Inside I have one div element with an img element inside.

Below that there is a p tag which is populated dynamically with text.

When the text is longer and the p tag becomes larger I want the image above to shrink to make room inside the container.

I have been trying to do this with flex and flex-shrink. This is what I've got:

http://codepen.io/niper1/pen/yaBxvx

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#main div {
  flex-shrink: 3;
}
img {
  height: 100%;
  width: auto;
  max-width: 100%;
}
p {
  flex-shrink: 0;
}

<div id="main">
  <div style="background-color:lightblue;">
    <img src="http://fakeimg.pl/250x100/">
  </div>
  <p>Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text N</p>
</div>

As you can see, the img tag is not shrinking to make enough space. Is this possible to do with flex-box or am I going to have to look for a different route?

Answer 1

A flex item, by default, cannot be smaller than the length of its content.

The initial size of a flex item is min-height: auto and min-width: auto.

Regardless of flex-shrink, your flex item will not be smaller than your image, unless you override the default with min-height: 0. (It would be min-width: 0, if your container were row-direction.)

Also, not all browsers recognize a parent's flex height as a reference for a child element's percentage height. So it's important to specify a height or flex-basis on the parent of the image.

#main {
  width: 100px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex; /* Safari */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#main div {
  flex: 1 1 100%;              /* 1 */
  min-height: 0;               /* 2 */
}

img {
  height: auto;                /* 3 */
  width: 100%;                 /* 3 */
}

p {
  flex-shrink: 0;
  min-height: 0;               /* 2 */
}

<div id="main">
  <div style="background-color:lightblue;">
    <img src="http://fakeimg.pl/250x100/">
  </div>
  <p>Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text Test text N</p>
</div>

Notes:

1. Chrome / Safari not filling 100% height of flex parent
2. Why doesn't flex item shrink past content size?
3. adjusted original code block