为什么溢出的弹性项目显示为紫色条纹？

Question

我正在了解有关 Chrome 中 Flexbox 检查器的更多信息。据我了解，当我将鼠标悬停在检查器中的弹性容器上时，紫色条纹表示弹性容器内的可用空间。所以，如果我有下面的代码

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

下面的紫色条纹是前两个项目放置在其最大内容中后的可用空间，其中 flex-grow 可以使子 Flex 项目占用该空间。

现在将 SVG 和文本视为弹性项目。我故意删除了 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;
}

在这种情况下，紫色条纹位于弹性容器之外

我理解这是因为 SVG 占据了整个宽度，因此没有空间可用于文本 Flex 项目，而 .icon 上的宽度或 flex-shrink 将解决问题。但我不明白的是为什么 Chrome 以紫色条纹显示它，表明它的自由正空间，尽管实际上它只是溢出 Flex 容器的空间。我的意思是，如果我将 flex-grow 应用于任何子弹性项目，它们就不会占用该空间。

当图像溢出弹性容器时，也会发生同样的事情，但至少不会以紫色显示，而是以红色显示

Answer 1

据我理解你的问题，我认为你已经向自己解释过了：

...紫色条纹表示弹性容器内的可用空间。

所以基本上，从第二个屏幕截图可以假设，您的 flex-container

.btn

具有基于 flex-children 的内容和大小的 内在大小。
通常，SVG 有自己定义的大小集，并在

<svg>

元素本身上设置适当的属性，这会影响其父（flex-container）元素的大小。

总而言之，您的 flex-container 似乎溢出了，这并不意味着它没有可用的宽度。