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

Question

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>

Answer 1

Give a margin and/or a width to the header, content and footer and align them to the center of the parent

• Added a nested element to the main containers for header, content and footer.
• Kept the width of the header, content and footer containers to 100% and gave a bottom border to them
• Added a width to the inner divs and aligned them in the center of their respective parents

.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
  align-items: center;
}



header, footer, .content{
  margin: auto;
  border-bottom: 1px solid black;
  width:100%;
}

header .section,footer .section, .content .section{
  height:100%;
  width:80%;
  margin:auto;
  background-color:red
}

header, footer {
  flex: 0 0 92px;
}

.content{
  flex: 1;
}

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