How to allow resize of img with flexbox within a div

This is likely a duplicate question but I couldn't find any useful tips for my case.

Here, I want an <img> element to resize its width and height in a flexbox contained in a <div>. Currently, it is not changing its size in any way (basically not responding to resizing of the window). Maybe the issue has to do with trying to put a flexbox inside a flexbox. My goal is to make the <img> resize proportionally inside a flexbox, or at least simplify my flexbox system.

This is a snippet of the concerning CSS:

.main > div {  display: flex;  flex-direction: row;}.card {  flex: 5;  display: flex;  flex-direction: row;}.tile-image {  align-items: center;  float: left;  flex: 3;}

By the way, there's nothing to run in my snippet, just did it this way because it's easier.