Please check out this code snippet in Chrome: codepen example
html:
<div class='flexbox'>
<div class='static'>ddd
</div>
<div class='flex'>
<div class='flex-child'>
<div class='container'>
*** lengthy text goes here *** ...</div>
</div>
<div class='flex-child'>hhh
</div>
<div class='flex-child'>hhh
</div>
</div>
<div class='static'>ddd
</div>
</div>
css:
html,body{
margin:0;
padding:0;
overflow:hidden;
}
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
display:flex;
position : relative;
}
.flex-child{
background:red;
width:100%;
display:block;
color:white;
position : relative;
}
.static{
background:transparent;
width:100%;
color:yellow;
}
.container{
position : relative;
background:magenta;
height:100%;
}
The example provided should be relatively easy to understand. The main issue is: How can the .container div be adjusted to accommodate any type of content without overlapping the footer.
Attempt to remove the background colors. The text in .container might visually intersect with the .static footer. How can this layout be organized so that the .content div and its content do not overlap the footer?
Edit:
The footer needs to stay at the bottom of the screen. No fixed sizes or dimensions should be specified in the CSS.
Please treat my question as a test, an experiment. I am striving for a flexible layout without explicitly setting sizes or dimensions, for instance, header height 50px. I desire the layout to be as generic as possible. Therefore, if you delete all the text from the .container in my original codepen and examine the .container height using developer tools, it will probably be 0, but ideally, it should match the height of its parent .flex-child. It may not comply with the standard practice, but how can this be achieved?
Edit 2: I have elaborated on my issue in another query alongside codepen and an image. Thank you for your input.
Thank you