CSS Position Fixed Maintain Height - html

Question

I have a div with content and an outter div that's just a wrapper. I'm trying to combine the css from the outter div to the inner div so i can remove the outter div. When I do that, the div is no longer visible(assuming because of zero height). I thought maybe it was the order so I tried rearranging the css but still no luck.
#div1 {
min-height: 200px;
width: 100vw;
}
#div2 {
/* min-height: 200px;
width: 100vw; */
position: fixed;
height: 100%;
width: 100%;
background-color: #74CFAE;
font-size: 25px;
line-height: 40px;
z-index: -1;
}
#div3 {
position: relative;
height: 600px;
width: 100vw;
background-color: #333;
}
<div id="div1">
<div id="div2">
<p> I want the following div to scroll over this content.</p>
</div>
</div>
<div id="div3"></div>
If you comment out the css for 'div1' and combine it with 'div2' you will see what I am talking about.
Is this a case that requires a wrapper? or is there something inherently wrong with my css?

Answer 1

My take on it: if you know height of div2, you can drop div1, but you'll have to place div3 at a definite top.
If you don't know div1/2 height and don't want to reposition dynamically div3, it seems like div1 as a wrapper is a good solution.
A suggestion with known div2 height:
#div2 {
height: 100px
width: 100vw;
position: fixed;
background-color: #74CFAE;
font-size: 25px;
line-height: 40px;
z-index: -1;
}
#div3 {
position: relative;
height: 600px;
width: 100vw;
background-color: #333;
top: 100px;
}
https://jsfiddle.net/oahurc53/1/