Why does the SVG shrink as soon as the sibling text is forced into multi-line?

Question

I have stumbled upon this strange behavior and would like to understand it and get rid of it. The SVG is defined to have 20px in width and height which works fine until the text becomes multi-line. You can achieve that by reducing the viewport width of your browser using the dev tools. As soon as the text breaks into multi-line the SVG shrinks.

Even stranger is the fact that, if you further reduce viewport width the SVG seems to be scaling along with it even though it didn't before the text wrapped and the lines of text remain at two.

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

div {
  display: flex;
  flex-shrink: 0;
  align-items: center;

  background: firebrick;
  color: #fff;
  width: 100%;
  height: 40px;
  position: fixed;
  padding: 10px 20px;
  box-sizing: border-box;
}

svg {
  height: 20px;
  width: 20px;
  margin-left: auto;
}

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
  <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <g stroke="none" stroke-width="1" fill="#fff" fill-rule="evenodd">
      <path d="M0.784305503,0.0885911588 L0.853553391,0.146446609 L12,11.293 L23.1464466,0.146446609 C23.3417088,-0.0488155365 23.6582912,-0.0488155365 23.8535534,0.146446609 C24.0271197,0.320012961 24.0464049,0.589437362 23.9114088,0.784305503 L23.8535534,0.853553391 L12.707,12 L23.8535534,23.1464466 C24.0488155,23.3417088 24.0488155,23.6582912 23.8535534,23.8535534 C23.679987,24.0271197 23.4105626,24.0464049 23.2156945,23.9114088 L23.1464466,23.8535534 L12,12.707 L0.853553391,23.8535534 C0.658291245,24.0488155 0.341708755,24.0488155 0.146446609,23.8535534 C-0.0271197425,23.679987 -0.0464048927,23.4105626 0.0885911588,23.2156945 L0.146446609,23.1464466 L11.293,12 L0.146446609,0.853553391 C-0.0488155365,0.658291245 -0.0488155365,0.341708755 0.146446609,0.146446609 C0.320012961,-0.0271197425 0.589437362,-0.0464048927 0.784305503,0.0885911588 Z"></path>
    </g>
  </svg>
</div>

The snippet might be already at two lines. You can expand it by running it then clicking on "Full Page".

Here is a gif of the issue: