Vertical align of flexbox childs's child - html

Question

I have a flexbox container with header, footer and a content. Using flexbox is no problem for me to stretch content so that it takes all available vertical space (colored green).
But I cannot center vertically all that is inside content after. I was first thinking to do the same flexbox approach, but it fails. In my example, basically, the red area must take all space that green area takes, and the text should be centered vertically and horizontally inside green area.
What do I miss?

Answer 1

You can also add display: flex on main and remove flex-grow: 1 from item.
html,
body {
height: 100%;
background-color: #ddd;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
background-color: #abc
}
main {
flex: 1;
background-color: #bada55;
display: flex;
}
.wrapper {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
background-color: red;
}
p {
margin: 0;
}
<header>HEADER</header>
<main>
<div class="wrapper">
<div class="item">
<p>This should be centered both VERTICALLY & HORIZONTALLY.</p>
</div>
</div>
</main>
<footer>FOOTER</footer>

Answer 2

Added
main {
display: flex;
align-items: center;
background-color: red;
}
html,
body {
height: 100%;
background-color: #ddd;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
background-color: #abc
}
main {
flex: 1;
background-color: #bada55;
position: relative;
display: flex;
align-items: center;
background-color: red;
}
.wrapper {
width: 100%;
text-align: center;
}
.item {
flex-grow: 1;
}
p {
margin: 0;
}
<header>HEADER</header>
<main>
<div class="wrapper">
<div class="item">
<p>This should be centered both VERTICALLY & HORIZONTALLY.</p>
</div>
</div>
</main>
<footer>FOOTER</footer>