Display: flex element wont grow vertically within parent - html

Question

I have a webpage where I want to center one of the pages both vertically and horizontally, like that:
<main>
<div>
This has to be centered both vertically and horizontally.
</div>
</main>
I can't change display of main as it's widely used for all the pages, and using flex there breaks way too much stuff.
I assumed this should work but it does not, because div does not grow in height:
main {
min-height: 1000px;
border: solid 1px red;
}
div {
display: flex;
align-items: center;
justify-content: center;
align-content: stretch;
flex-grow: 1;
}
I'd rather not do position: absolute; top: 0; right: 0; bottom: 0; left: 0;.
Any hints how can I stretch my div to fill main? Why wouldn't it work out of the box, can't flex simply grow within elements with block/inline-block displays?
https://jsfiddle.net/wcu6fnz5/

Answer 1

It might helps you.
/* I cannot edit main, there are 100s of pages based on it, cant change its display etc. */
main {
min-height: 200px;
border: solid 1px red;
}
div {
display: flex;
min-height: inherit;
justify-content: center;
align-items: center;
}
<main>
<div>
<span>This has to be centered both vertically and horizontally.</span>
</div>
</main>

Answer 2

The thing about flexbox is that you should focus on instructing the parent, not the child.
In your example, justify-content and display: flex should be in the parent. You could also use flex-direction: column to tell the browser you want the child to grow vertically.
You could also use flex: 1 as a shorthand for flex-grow. This way, the child doesn't even need display: flex.
main {
min-height: 1000px;
border: solid 1px red;
display: flex;
flex-direction: column;
justify-content: stretch;
}
div {
flex: 1;
}
Update
To achieve what you mentioned in the comments, why don't you try this:
main {
min-height: 1000px;
border: solid 1px red;
}
section {
height: 1000px;
width: 100px;
background: gainsboro;
/* important stuff */
display: flex;
flex-direction: column;
justify-content: stretch;
}
div {
flex: 1;
width: 40px;
background: aquamarine;
}
Those sizes and colors are only for you to see the results.