Child container is not filling all height parent container with display flex and scroll

I have a problem with CSS which I don't get solved. I have one parent container called plcRemoteFormContainer with one child container <form id="plcRemoteForm">. This child should meet the next requirements:

• Be centered.
• Fill the entire height of parent container
• Display scroll in plcRemoteFormContainer when child content overflows.

All this requirement are meeting but when scroll is displaying, the child container is not filling the entire height of parent container.

This is the html code:

<div id="host"><div id="plc-remote-form"><div class="upperMenuContainer">Breadcrumb</div><div class="plcRemoteFormContainer"><form id="plcRemoteForm"><fieldset class="identificationFieldset"><legend class="legend">identification</legend><div class="identificationContainer"><div class="fieldForm idCard"><label for="idCard">Id Card*:</label></div></div></fieldset><fieldset class="electricalPanelDataFieldset"><legend class="legend">electrical</legend></fieldset><fieldset class="electricalPanelDataFieldset"><legend class="legend">electrical</legend></fieldset><fieldset class="electricalPanelDataFieldset"><legend class="legend">electrical</legend></fieldset><fieldset class="electricalPanelDataFieldset"><legend class="legend">electrical</legend></fieldset><fieldset class="electricalPanelDataFieldset"><legend class="legend">electrical</legend></fieldset></form></div></div></div>

And this is the css code:

#host {  height: 100%;  width: 100%;  background-position: top;  background-repeat: no-repeat;  background-size: 100% 215px;  overflow: auto;  font-size: 0.875rem !important;  line-height: 1.5;  padding: 5px 10px 10px;  background-color: #bbb;}#plc-remote-form {  height: calc(100vh - 60px);  display: flex;  flex-direction: column;  background-color: red;  .upperMenuContainer {    background-color: #0074c8;    border-top-left-radius: 4px;    border-top-right-radius: 4px;    width: 100%;    min-height: 26px;  }}.plcRemoteFormContainer {  flex: 1;  overflow-y: auto;  display: flex;  justify-content: center;  background-color: #c5c5c5;}#plcRemoteForm {  background-color: #ebebeb;}

I have done a stackblitz to help to understand this problem https://stackblitz.com/edit/styles-form?file=src%2Fapp%2Fapp.component.html. How can I solve this problem? Thank you in advance.

I have trying set heigth:100% in child plcRemoteForm but this doesn't work.