SVG在flexbox中缩小[重复]答案

【问题标题】：Svg shrinks in flexbox [duplicate]SVG在flexbox中缩小[重复]
【发布时间】：2021-04-24 11:23:10
【问题描述】：

在此代码中，第一个 div 显示 3rem 宽度。 svg 圆也应该是 3rem 宽，如果我删除 display:flex 就是这样。但是当它是 flex 时，svg 会缩小。我怎样才能强制执行这个大小？我想要流畅的布局并使用 rem 而不是 px。

如果我删除长句并只保留“Lorem ipsum”，那么 svg 也是 3rem。 svg 旁边的长文本和 flexbox 的组合导致 svg 变得太小。

<div style='background: black; width:3rem'>
  3 rem
</div>
<span style='display:flex'>
  <svg viewBox="0 0 100 100" style='width:3rem' xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50" /></svg>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem unde, aliquid harum suscipit numquam. Reiciendis, earum! Eveniet, voluptate, at asperiores animi quis nesciunt facilis, labore officiis necessitatibus iusto repellat iure.</div>
</span>

【问题讨论】：

您需要添加svg{flex-shrink:0;}

标签： html css svg flexbox

【解决方案1】：

你可以试试这样的。只需用一个 div 包装 SVG。

<div style='background: black; width:3rem'>
   3 rem
</div>
<span style='display:flex'>
   <div>
     <svg viewBox="0 0 100 100" style='width:3rem' xmlns="http://www.w3.org/2000/svg"> 
        <circle cx="50" cy="50" r="50" />
     </svg>
   </div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem unde, liquid 
    harum suscipit numquam. Reiciendis, earum! Eveniet, voluptate, at asperiores animi 
     quis nesciunt facilis, labore officiis necessitatibus iusto repellat iure.
  </div>
</span>

【讨论】：

【解决方案2】：

检查一下：

<div style='background: black; width:3rem'>
  3 rem
</div>
<span style='display:flex'>
  <div style='min-width:3rem'>
     <svg viewBox="0 0 100 100" style='width:auto' xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" />
  </svg>
  </div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem unde, aliquid harum suscipit numquam. Reiciendis, earum! Eveniet, voluptate, at asperiores animi quis nesciunt facilis, labore officiis necessitatibus iusto repellat iure.</div>
</span>

【讨论】：