Why are overflowing flex items shown in purple stripes?

I am learning more about the Flexbox inspector in Chrome. So far as I understand when I hover over a flex container in the inspector the purple stripes indicate the available space within the flex container. So, if I have the below code

.flex-container {  width: 70%;  max-width: 60rem;  border: 5px solid #000;  padding: 2em;  display:flex;}

<div class="flex-container"><p>First flex item</p><p>First flex item</p></div>

The purple stripe below is the available space after the first two items are laid in their max-content and where flex-grow can make the child flex items take that space .

Image may be NSFW.
Clik here to view.

Now consider an SVG and text as flex items. I have intentionally removed the width and height for the SVG

.btn {  display: inline-flex;   align-items: center;  cursor: pointer;  text-decoration: none;  padding: 0 .5em 0 0;  color: black;  background: white;  border: 2px solid black;  margin: 1em;} .btn:hover,.btn:focus {  background: black;  color: white;}.btn .icon {  display: block;  /* width: 40px; */  /*height: 40px; */  background: white;  padding: .25em;  margin-right: .5em;}

In this case, the purple stripe is outside the flex container

Image may be NSFW.
Clik here to view.

I understand this is because the SVG takes the whole width and hence makes no room available for the text flex item and a width or flex-shrink on the .icon will fix the problem. But what I fail to understand is why Chrome shows this in purple stripes indicating its free positive space although in reality it is just space overflowing the flex container . I mean if I apply flex-grow to any of the child flex items its not like they will take that space.

The same things happens when an image overflows a flex container but at least that is not shown in purple but in red

Image may be NSFW.
Clik here to view.