Why are overflowing flex items shown in purple stripes?

Question

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 .

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

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

Answer 1

As far as I understand your question, I think you pretty much explained it to yourself:

... the purple stripes indicate the available space within the flex container.

So basically, as far as can be assumed from the second screenshot, your flex-container .btn has an intrinsic size that is based on the content and size of the flex-children.
Typically, an SVG has its own defined size set with the appropriate attributes on the <svg> element itself, and that affects the size of its parent (flex-container) element.

In summary, it appears that your flex-container is overflowing, which does not imply that it has no available width.