Flexbox: Why is child element resized and how to fix it?

Question

css

Good time of the day.
Learning Flexbox, ran into a problem. I divide the container into three parts using the flex-grow property . Code:
HTML:

<section class="top-nav">
        <div class="part1">
            <img src="img/logo.svg" alt="Logo">
        </div>
        <div class="part2">

        </div>
        <div class="part3">

        </div>
</section>

CSS:

.top-nav {
        display: flex;
}

.part1 {
        flex-grow: 1
}
.part2 {
        flex-grow: 2
}
.part3 {
        flex-grow: 1
}

Blocks are placed and stretched exactly as I need. But the problem arose when I inserted the image into the block (part1) . He expanded, which I do not need at all.
How to fix it?
Thanks in advance.

Answer 1

I got to the bottom of the solution to the problem and it all consisted only in the fact that I did not read up about the properties of Flexbox. I know, sinner, sorry to bother you. However, maybe it will save someone :)
Solution: instead of the flex-grow property, you need to use the flex property

Answer 2

You better learn what Flex does, and then the questions will disappear, Flex replaces 3 values ​​flex-grow, flex-shrink and flex-basis, in your case, you lacked exactly flex-basis