[Prolific]

Всем хай. Есть блок комментария, он флексовый, в нем два блока, один под картинку, другой под текст. Картинка должна быть строго круглой 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>