Элементы Flexbox перетекают в заголовок

Question

Я создаю личный веб-сайт и использую много 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>

https://codepen.io/anon/pen/XYBbgE

Я хотел использовать макет flexbox для своего раздела проектов, чтобы контент был центрирован, и мне нравится, как легко это сделать с помощью flexbox. Если вы отрегулируете высоту контейнера кодепа, либо увеличив высоту ИЛИ уменьшив ее, вы увидите, что заголовок скрывает некоторые элементы.

Я включил HTML, чтобы показать макет. Я много исключил, чтобы сэкономить место, однако ссылка на кодовый блок намного ближе к тому, как выглядит реальный дизайн.

РЕДАКТИРОВАТЬ: я сделал GIF-файл, демонстрирующий поведение, с которым у меня проблема

gif проблемы с flexbox

Как вы можете видеть, когда я регулирую высоту, появляется заголовок моей страницы, который закрывает некоторые элементы под ней. Я также не могу прокрутить выше, чем высота, если это имеет смысл.

Answer 1

Чтобы указать на вашу ошибку, это выравнивание элементов, для всех элементов вы выровняли его по центру по вертикали. таким образом, это казалось вне контейнера, поскольку его высота была больше чем область просмотра. Вы можете исправить это с align-items: center; до align-items: flex-start;

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

и, чтобы вы знали, я думаю, что вы используете слишком гибкий для всего, что может быть достигнуто без него легко