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

Доброе время суток.
Изучаю 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). Он расширился, что мне совсем не нужно.
Как это исправить?
Спасибо заранее.