Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Флекс изменяет фиксированную ширину (https://javascript.ru/forum/xhtml-html-css/70050-fleks-izmenyaet-fiksirovannuyu-shirinu.html)

Prolific 06.08.2017 20:51

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

Prolific 06.08.2017 21:29

Нашел решение. https://ru.stackoverflow.com/questio...BD%D0%BE%D0%B9


Часовой пояс GMT +3, время: 00:07.