Сделать элемент flex игнорированным дочерним элементом

Можно ли заставить элемент flex игнорировать дочерний элемент, чтобы размер не влиял на другие элементы?

Например, у меня есть обертка с display: flex. Он имеет заголовок, содержимое и нижний колонтитул.

<div class="wrapper">
    <header></header>
    <article></article>
    <footer></footer>
</div>

Я хочу, чтобы оболочка игнорировала тег заголовка (заголовок будет зафиксирован в верхней части окна). Статья будет установлена на flex: 1, поэтому она занимает остальную часть пространства, заставляя нижний колонтитул снизу страницы. Вот пример CSS:

.wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 50px; /* Accounts for header */
}

header {
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
}

article {
    flex: 1;
}

footer {
    height: 50px;
}

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

Ответ 1

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

In your.wrapper declare flex-wrap: wrap

Ответ 2

В вашем .wrapper объявите flex-wrap: wrap. Затем для вашего заголовка вы можете добавить стиль flex-basis: 100%, который заставит все остальное ниже заголовка.

Ответ 3

Вы можете использовать flex-shrink: 0 для дочерних элементов, чтобы они не сокращались для заполнения контейнера. И используйте flex-wrap: wrap на контейнере/обертке, чтобы ваши дети обернулись.

Ответ 4

При попытке использовать flex-direction:column единственное, что я нашел полезным для этого, - это абсолютное позиционирование/с соответствующим заполнением.

Ответ 5

Добавьте flex-wrap: wrap на обертку, где у вас есть display: flex on.
Это помогло мне.