Image width 100% of the Flex div - css

Question

I want to make an image have a max-width 100% of the parent div, where the parent div is a flex element.
But when I give image 100% width, the image overflows the content!
Fiddle:
https://jsfiddle.net/3f8k19g5/1/
<div class="container">
<div class="image">
<img src="https://m.xcite.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/u/buy_apple_imac_21.5_inch_all_in_one_desktop__lowest_price_in_ksa_2.jpg" alt="">
</div>
<div class="text">This is an iMac</div>
</div>
CSS:
.container{
width: 800px;
background-color: red;
display: flex;
}
.image{
background-color: blue;
flex-grow: 2;
max-width: 100%;
}
.text{
background-color: yellow;
flex-grow: 1;
}

Answer 1

I went ahead and updated your code. Run the snippet below.
The image class was being applied to the parent div, I instead moved it to the img tag so the image take 100% of the container div.
.container{
width: 800px;
background-color: red;
display: flex;
}
.image{
background-color: blue;
flex-grow: 2;
max-width: 100%;
width: 100%;
}
.text{
background-color: yellow;
flex-grow: 1;
}
<div class="container">
<!= Feel free to remove the empty div around the image tag if you arent using it ->
<div>
<img class="image" src="https://m.xcite.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/b/u/buy_apple_imac_21.5_inch_all_in_one_desktop__lowest_price_in_ksa_2.jpg" alt="">
</div>
<div class="text">This is an iMac</div>
</div>