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
