Question posted in 
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
plcRemoteFormContainerwhen 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.
2
Answers
Need to change CSS
Your form is fixed height due to other css you have added. You simply need to set the height of your
#plcRemoteFromasheight:min-content;it will resize with the content and you will get the desired result i.e. no overflow on scroll.There are other ways of doing this as well but this method is the simplest as per your code. If this doesn’t suite your needs then let me know.