CSS styling on relative divs inside absolute div, height not taking

Ok, so this is a simple css question, but I can't seem to find a straight answer on the web to save my life. I've got this set up:

<div id="top">
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

and then some css:

#top {
    position:absolute;
    height: 100%;
    width: 100%;
}

#1 {
    position:relative;
    margin-top:5px;
    height: 30%;
    width: 100%;
}

#2 {
    position:relative;
    margin-top:5px;
    height: 10%;
    width: 100%;
}

#3 {
    position:relative;
    margin-top:5px;
    height: 58%; /* not 60% to account for the 5px margin */
    width: 100%;
}

but the dang divs are not responding to the percentage height style element... any ideas?

For context, I'm building a React.js site so I'm actually using scss files for my styling elements after rending them with React elements. Pretty sure that doesn't matter but just because I don't actually know everything, I'll mention that here. :) Thanks in advance for any help!

- Jon