Никаких дополнительных оберток делать не нужно. Для родителя задаете display: flex и все его дочерние элементы будут выровнены по flex-сетке. Из вашего 1 примера это
.main {
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
}
.header, .content, .footer { width: 100%; }
Потом делаем основное содержимое
.content {
display: flex;
flex-flow: row nowrap;
}