Я пытаюсь создать строки с svg + text с помощью flexbox, и у меня возникает проблема.
Когда текст слишком длинный и занимает 2 строки, svg уменьшается.Чем больше строк, тем больше они уменьшаются
Примечание: svg является заполнителем на данный момент
Вот код:
<div class="wrapper">
<div class="container">
<div class="svg"></div>
<p>lorem</p>
</div>
<div class="container">
<div class="svg"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. </p>
</div>
</div>
И css:
.wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
display: flex;
flex-direction: column;
padding: 40px 12px;
}
.container {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
}
.svg {
margin-right: 20px;
height: 20px;
width: 20px;
background-color: #DEDEDE;
}
p {
margin: 0;
}
Вот кодекс, чтобы вы могли понять, что я имею в виду под «сжатием»: https://codepen.io/anon/pen/YdWyBM?editors=1100
Есть идеи?
Спасибо