scrollTop inside position fixed and parent relative

HTML

<p>Donec posuere vulputate arcu. Curabitur blandit mollis lacus. Curabitur vestibulum aliquam leo. Phasellus viverra nulla ut metus varius laoreet. Quisque ut nisi.</p>
<div id="relativeDad">
    <div id="containerParent">
    <div id="containerChild">
        <section id="content">
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
             this is a form<br>
                this is a form<br>
            <p class="form-error-msg">
Please provide missing information in the fields highlighted below.</p>
                this is a form<br>
                this is a form<br>
                this is a form<br>
             this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
             this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                this is a form<br>
                <fieldset>
					<input type="date" id="dateOfBirth" required="">
					<input type="password">
				</fieldset>
                <button id="button1">button</button>
				
		
	    </section>
      </div>
    </div>
   </div>

CSS

#relativeDad {
    position: relative;
      overflow: hidden;
}
#containerParent {
    position: fixed;
    background-color:blue;
     height: 100%;
    border:1px solid red;
    width: 100%;
}
#containerChild {
    position: fixed;
    overflow-y: scroll;
 height: 80%;
    
}

#content {
    position:relative;
}

JavaScript

$("#button1").on("click", function(){
    var position = $(".form-error-msg").position().top;
$("#containerChild").animate({scrollTop: position});
});