Tengo que tener 3 divs, los cuales denominaré personalInfo_header, personalInfo_contenedor_central y personalInfo-footer. Los cuales los 3 están contenidos en un div con id main-container.
El inconveniente que tengo es que si tengo contenido en el div personalInfo_contenedor_central, este muchas veces sobrepasa su lugar y superpone al contenido de abajo, del div personalInfo-footer. ¿Cómo es posible solucionar esto?
El siguiente es el código HTML:
<div id="main-container">
<div id="personalInfo_header">
</div>
<div id="personalInfo_contenedor_central">
</div>
<div id="personalInfo-footer">
</div>
</div>
Este es el código css.
#main-container{
display: flex;
flex-direction: column;
text-align: center;
width: calc(100% - 10px);
height: 100%;
top: 0;
}
#personalInfo_header{
height: 15%;
width: 100%;
position: fixed;
top: 10%;
display: flex;
flex-direction: column-reverse;
justify-content: flex-start;
border:solid;
border-color: green;
}
#personalInfo_contenedor_central {
height: 50%;
width: 100%;
position:relative;
top:15%;
display: flex;
flex-direction: column;
align-items: center;
border:solid;
border-color: blue;
}
#personalInfo-footer{
height: 25%;
width: 100%;
position:fixed;
top:75%;
display: flex;
flex-direction: column;
align-items: center;
border:solid;
border-color: red;
}
El problema es que tengo un formulario en personalInfo_contenedor_central que obtiene datos por un API REST y este es variable.