Chrome Flexbox调试器中，溢出空间为何显示为紫色条纹？

悬停Flex容器时，Chrome Flexbox调试器中的紫色条纹，常规含义是容器内的可用空间——这部分空间可以通过flex-grow分配给子项。

常规场景示例 #

当Flex容器包含普通文本子项时：

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

此时紫色条纹代表两个子项占据最大内容宽度后，容器内剩余的可用空间，符合预期。

SVG作为Flex项的异常场景 #

当SVG与文本作为Flex项，且故意移除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;
}

此时紫色条纹出现在Flex容器外部，实际对应SVG占满宽度导致文本溢出容器的空间。

我知道给.icon设置width或flex-shrink可以解决溢出问题，但疑惑的是：Chrome为什么用代表可用空间的紫色条纹来显示这部分溢出空间？毕竟这部分空间根本无法通过flex-grow利用。而当图片溢出容器时，调试器会显示红色条纹，这才符合预期。

内容的提问来源于stack exchange，提问作者Knownow