following is my code, "text1" overflow the flex container, I expect img + text in flex container and img fill flex container rest

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--mobile friendly-->
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <style>
        .c {
            display: flex;
            flex-direction: column;
            width: 100px;
            height: 100px;
            border: 5px solid lightblue;
        }

        .c img {
            flex-grow: 1;
            object-fit: contain;
        }
    </style>
</head>
<body>
<div class="c">
    <img src="./img.jpg"/>
    <div>text1</div>
</div>
</body>
</html>

```

the result is:

[![enter image description here](https://i.stack.imgur.com/AmWvi.png)](https://i.stack.imgur.com/AmWvi.png)

if element is not img and is div, flex-grow: 1 will fill flex rest space, I'm confused why img cause inner overflow

following is my "img.jpg"

[![enter image description here](https://i.stack.imgur.com/P5N3A.jpg)](https://i.stack.imgur.com/P5N3A.jpg)