Svg shrinks in flexbox

Question

In this code the first div shows 3rem width. The svg circle should also be 3rem wide, which it is if I remove display:flex. But when it is flex, the svg shrinks. How can I enforce this size? I want to have fluid layout and use rem not px.

If I remove the long sentence and keep only 'Lorem ipsum' then svg also is 3rem. Something about the combination of long text next to svg and flexbox that is pushing the svg to become too small.

<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>

You need to add `svg{flex-shrink:0;}` – enxaneta Jan 20 '21 at 07:42 — enxaneta, Jan 20 '21 at 07:42

score 0 · Answer 1 · answered Jan 20 '21 at 05:58

You can try something like this. Just wrap SVG with one div.

<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>

score 0 · Answer 2 · answered Jan 20 '21 at 06:16

Check this:

<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>

Svg shrinks in flexbox

2 Answers2