Как мне сделать так, чтобы блок занимал 100% свободной высоты?

У меня есть div, с классом wrapper, который занимает 100vh и 100vw. В нем есть блок header, который занимает 80px. В этот блок header вставлен блок с общим классом container.

.container {
    width: 1160px;
    margin: 0 auto;
    height: 100%;
}

Я добавил свойство height:100%, потому что, если не добавлять, то все, что я буду вставлять дальше, будет вставляться не в блок высотой 80px, а в блок контейнера, а он без стилей занимает только высоту своего контента. После этого я хочу сделать 2 блок content, который будет размещен под header и должен занимать всю остальную свободную часть экрана от header

<div class="wrapper">
 <div class="header"></div>
 <div class="content"></div>
</div>

Применяя к content height:100%, блок не начинает занимать всю остальную свободную часть экрана. Далее я попробовал добавить некоторые стили к wrapper и content:

.wrapper{
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
}
.content{
    flex: 1 1 auto;
}

Теперь мой блок content занимает всю остальную часть экрана под header. Но теперь другая проблема, когда я внутрь этого блока вставляю container, то блок <div class='container'></div> не занимает 100% от блока content, а лишь имеет размер своего внутреннего контента, хоть и имеет height:100%. Как правильно решить эту проблему, чтобы вешая внутрь блока класс container, который обрезает ширину и делает весь контент по центу, он занимал всю высоту моего блока?