Html 奇怪的css显示：flex停止只在类上有效，而不在标记上有效

简单地说，我有一个标题标记，当我按类引用它时，它只应用了display:flex，而不是标记本身

我有以下html：

<header class="flexBox">
    <h1 class="title">T</h1>
</header>

这很有效。标题正好位于标题的中间。但是，如果我稍微更改css，使css应用于header而不是.flexBox，flex行为将停止工作。即使在本例中，header和.flexBox应用于相同的元素，即

header {
    display: flex;
    ...
}

…将放弃flex行为，尽管所有其他css仍使用背景色等

为了确保我没有遗漏一些明显的东西，我删除了除所列内容之外的所有其他css。Firefox和Chrome都存在这个问题

我尝试制作一个JSFIDLE，但JSFIDLE将flex应用于header和.flexBox，这是预期的行为

---

编辑：我缺少一个花括号。问题仍然是一样的。

在FF和Chrome中对我很好

header {   
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: red;
   height: 20em;
}

---

可能有其他CSS覆盖了某个地方的显示属性。它应该可以工作。除非您提供一个最小的、完整的、可验证的MCVE示例，否则您的问题是离题的。请参阅：。您的CSS缺少结束}。这只是一个复制/粘贴问题吗？这是我的想法，但在这一点上没有其他css。它是一个具有上述结构和css的HTML文档。没有其他内容。@crowhill请包含该文档的完整代码。请确保您没有这样做。标题？

header {   
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   background-color: red;
   height: 20em;
}