Trying to create a flex based layout of header, content and footer

I'm trying to achieve this layout. The thin lines are within which all three sections must be bound. The header and footer need to be vertically centered. Then the content should take the height till the footer hits the bottom of the viewport. Please note that the thin lines are only there to show the boundary... they shouldn't actually be in the code.

Work so far:

.wrapper{  display: flex;  flex-direction: column;  height: 100vh;  background-color: pink;}header, footer, .content{  border: 1px solid black;}header, footer {  flex: 0 0 92px;}.content{  flex: 1;}

<div class="wrapper"><header>Header</header><div class="content">Content</div><footer>Footer</footer></div>