Html Flexbox项目溢出到标题中

我正在建立一个个人网站，并一直在使用大量的flexbox来达到我想要的布局。我最近遇到了一个我似乎无法解决的问题。我的flexbox容器中的项目似乎溢出并进入其他容器，例如我的页眉容器或页面应该结束的底部

<div class="main-container">
    <div class="header">
        <h1>John Doe</h1>
        <h2>Test</h2>
    </div>
    <div class="content-container">
        <div class="projects">
    <div class="content-container">
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
        <div>
            <h1>project</h1>
            <p>project text</p>
        </div>
    </div>
</div>
    </div>
</div>

无名氏
测验
项目
项目文本

项目
项目文本

项目
项目文本

项目
项目文本

我想在我的项目部分使用flexbox布局，这样内容就可以居中了，我喜欢用flexbox做这件事有多容易。如果通过增加或减少高度来调整codepen容器的高度，则可以看到标头隐藏了一些元素

我已经包括了一些HTML来显示布局。为了节省空间，我排除了很多，但是代码笔链接更接近实际设计

编辑：我制作了一个gif来演示我有问题的行为

---

正如您所看到的，当我调整高度时，我的页面标题似乎覆盖了它下面的一些项目。如果有意义的话，我也不能滚动到比高度更高的位置

要指出您的错误，这是项的对齐，对于所有已对齐的元素，它都垂直居中对齐。所以它看起来像是从一个容器里出来的，因为它的高度超过了视口。您可以通过

align items:center到
对齐项目：灵活启动

.projects {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

为了让您知道，我认为您使用的灵活性太强，无法轻松实现所有目标
您能否澄清一下“溢出”的确切含义？你的标题中有一个flexbox，它与底部齐平，但它看起来并没有脱离它的父项——在你的提琴中，它根本没有与其他内容重叠。你确认你的小提琴显示问题了吗？具体哪个元素与哪个其他元素重叠？标题应该很好。是它下面的潜水舱从容器里溢出来的。content container div中的div。如果调整codepen输出框的滑块，可以看到标题覆盖了元素。我尝试将其设置为flex start，但这似乎无法解决问题。我已经在我的原始帖子中加入了一个gif，在那里我演示了我在页面上遇到的问题。@wjvukasovic检查更新的答案，我想现在就可以了。回答时，我想我把
.projects
换成了
.container