为什么看不到该内联div的背景颜色？

Question

我仍然对CSS的display属性的一些基础感到困惑。考虑以下简单的html：

.outer {
  background-color: red;
  display: inline;
}

.inner {
  display: inline;
}

<div class="outer">
  <div class="inner">
    Some Text
  </div>
</div>

然后两个div都显示inline，您会看到以下内容：

。

这是我的期望，因为我认为“内联”的含义是对其中包含的所有内容进行“最小包装”。在这种情况下，恰好是包装一个内联div，而该内联div本身只包装了“某些文本”。

但是，如果我现在更改内部div的CSS，使其现在显示为“阻止”，那么我将不再看到任何红色背景色。但为什么？ Firefox检查器表明存在外部div，并且其大小与内部div相同（考虑到“最小包装”，我希望这是正确的），但是其背景色不会显示出来。

请让我知道是什么细微的CSS规则导致了这种非直觉的行为。 Here is a codepen处于最终令人困惑的状态。