Javascript-форум - Флекс изменяет фиксированную ширину

Всем хай. Есть блок комментария, он флексовый, в нем два блока, один под картинку, другой под текст. Картинка должна быть строго круглой 100x100px. Она получается овальной. Т.е. сжимается по ширине. Как это исправить? flex-basis дает такой же результат как и width.

Код SASS:

Код:

.item {

        border: 2px dashed black;

        flex-basis: 40%;

        display: flex;

        .comment_img {

                background-color: green;

                height: 100px;

                width: 100px;

                border-radius: 50%;

                margin-right: 20px;

        }

        .text {

                background-color: blue;

                hr {

                        width: 40px;

                        margin-right: 100%;

                        border: 1px solid #f38181;

                }

                color: #fff;

        }

}

Код HTML:

<div class="item">
	<div class="comment_img"></div>
	<div class="text">
		<span class="name">Mattew Dix</span>
		<span class="descript">Graphic Design</span>
		<hr>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, dicta.</p>
	</div>
</div>