多行文本使 svg 缩小

Question

我正在尝试使用 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

有任何想法吗？

谢谢

Answer 1

你的魔术是.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>