Bottom div is overlapping - html

Question

We are trying to create Email application. We are facing issue in message body div which is over lapping with header div (contains To/CC/Subject). On page load everything looks good but when start adding email id's in To field then body section is getting overlapped with header.
.MainDiv{
position: fixed;
width: 65%;
max-width: 890px;
height: 80%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
}
.Header{
clear: both;
margin: 0 5px 25px;
min-height: 100px;
display: block;
position: absolute;
width: 99%;
border: solid 1px green;
padding: 10px 20px 0px;
overflow: initial !important;{
}
.Body{
position: absolute;
border: solid 1px red;
top: 175px;
bottom: 72px;
width: 100%;
overflow-y: auto;
}
ReplyMessage_Screenshot

Answer 1

remove position: absolute; it's causing problem
.MainDiv{
position: relative;
width: 65%;
max-width: 890px;
height: 100%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
border: solid 1px black;
overflow-y : auto;
}
.Header{
clear: both;
min-height: 100px;
display: block;
width: 100%;
border: solid 1px green;
overflow: initial !important;
}
.Body{
border: solid 1px red;
width: 100%;
overflow-y: auto;
}
h2{
background-color:yellow;
}
h3{
background-color:teal;
}
<div class = "MainDiv" >
<div class ="Header" contenteditable="true">
<h2>
Header ygygyggyggygyyygyggygyyg yyfyffyyffyfyfy yfyfyfyfy gygygygygyyg yggygygyyggy gygyygygyyggygygygygy yggyygygyggyy uhuuuguug guuggugu
</h2>
</div>
<div class= "Body" contenteditable="true">
<h3>
Message Body
</h3>
</div>
</div>

Answer 2

You seem to be overdoing it. Here is what you need perhaps.
.MainDiv{
}
.Header{
margin: 0 5px 10px;
min-height: 100px;
display: block;
border: solid 1px green;
padding: 10px 20px 0px;
}
.Body{
border: solid 1px red;
margin: 0 5px 0;
overflow-y: auto;
padding: 10px 20px 0px;
height:300px;
max-height:600px;
}
<div class="MainDiv">
<div class="Header">
</div>
<div class="Body">
</div>
</div>