Flexbox: почему изменяется размер дочернего элемента и как это исправить?

Question

[Артем Скопинцев]

Доброе время суток.
Изучаю Flexbox, столкнулся с проблемой. Разделяю контейнер на три части используя свойство flex-grow. Код:
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
}

Блоки размещаются и растягиваются именно так, как мне нужно. Но проблема возникла тогда, когда я вставил изображение в блок (part1). Он расширился, что мне совсем не нужно.
Как это исправить?
Спасибо заранее.

Answer 1

[Артем Скопинцев]

Докопался до решения проблемы и вся она заключалась лишь в том, что я не дочитал про свойства Flexbox'а. Знаю, грешник, простите за беспокойство. Однако может кого-то это спасет:)
Решение: вместо свойства flex-grow нужно использовать свойство flex

Answer 2

[Михаил Чирский]

Вы лучше изучите что делает Flex, и тогда вопросы отпадут, Flex заменяет 3 значения flex-grow, flex-shrink и flex-basis, в вашем случае вам не хватало именно flex-basis