To be 100% sure we would need an working example. But most likely the problem is that you give 100px to your container combined with flex-grow and probably an image at least 100x100 if not bigger.

My best guess is that the rendered image takes at least 100px height and the .it div overflows (pushing the text out of reach).

You have some options to deal with this. The easiest would be to give the image fixed height rather than the container (but the best solution depends a lot on what you need)

(or at least give it a maxheight of 100px - 1 line of text)

Can you also change from .it *:first:child to .it > img ? Be aware that .it *:first:child will also trigger for nested children (so <div class="it"><div><span>this will also be catched</span></div></div>)

EDIT: I think something like this is what you are searching for:

.it {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 100px;
}

.it > div:first-child {
    display: flex;
    height: 0;
    flex: 1 1 0;
    justify-content: center;
    background-color: pink;
}
    
.it img {
    object-fit: contain;
}

<div class="it">
  <div>
    <img src="https://i.stack.imgur.com/rtDch.jpg"/>
  </div>
  <div>More text here</div>
  <div>text1</div>
</div>    
<div class="it">
  <div>
    <img src="https://i.stack.imgur.com/rtDch.jpg"/>
  </div>
  <div>text2</div>
</div>

Explication: In order to to force your image to only fill the remaining space wrap the image in a flex container and give it a height of 0. This way the other elements will definitely fill in the .it container space (since your image container has height 0). After give it flex-grow: 1 so it will grow to fill the remaining empty space (last 2 lines inside .it > div:first-child {...} are, of course, optional)