Push footer to bottom of flexbox - html

Question

I want my ReactModal to sit at the bottom of the viewport, but it's sitting right underneath the Results, and all I've tried so far has failed to correct the problem. I know this is a common issue and there are many solutions online, but there is something about how I've got my CSS set up that is not allowing the flex-grow property to work the way I expect it to. Any ideas?
JSX:
<div className='App'>
<div className='main-content'>
<Header/>
<Results results={testData}/>
</div>
<ReactModal/>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
.App {
text-align: center;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 1.5rem;
align-content: center;
min-height: 100vh;
}
.main-content {
flex-grow: 1;
}

Answer 1

flex-grow specifies how much of the remaining space in the flex container should be assigned to the item. If your trying to place the ReactModal to the bottom of the viewport you would probably want to use the example below.
Edited
Codepen Example
If you look at the css file, you would add this:
position: fixed;
bottom: 0;
To your ReactModal component and it would place it to the bottom of the page. You would not use flex-grow because it is totally useless in this situation.
Hope this helps.