Текст в несколько строк сокращает SVG - PullRequest
0 голосов
/ 16 декабря 2018

Я пытаюсь создать строки с 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

Есть идеи?

Спасибо

Ответы [ 2 ]

0 голосов
/ 16 декабря 2018

я добавил max-width:calc(100% - 40px) к p для margin-right:20px и width:20px

.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;
  max-width:calc(100% - 40px);
 }
<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>
0 голосов
/ 16 декабря 2018

Ваш магический трюк .svg {flex-shrink: 0;}.Вот как вы отключаете сжатие для гибкого ребенка.

.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;
  flex-shrink: 0;
}

p {
  margin: 0;
}
<div class="wrapper">
  
  <div class="container">
    <div class="svg"></div>
    <p>lorem</p>
  </div>
  
  <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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris </p>
  </div>
  
</div>
...