How to fit content inside div - html

Question

I'm having trouble fitting any amount of content inside the entire block div, I've tried to set the height to auto however that didn't work, I've tried the overflow property which didn't work as well. I would like the entire div height to expand when there is more content because I'm dynamically changing the content, I'm not understanding why the entire div height is not expanding as there is more content inside it. Below is the example.
Please provide thorough explanation to why the div height is not expanding.
#entire-block {
bottom: 50px;
box-shadow: rgb(159, 159, 155) 4px 4px 4px -1px;
box-sizing: border-box;
/* min-height: 136px; */
height: auto;
position: fixed;
overflow: ;
right: 0px;
width: 370px;
z-index: 999;
background: rgb(215, 215, 210) none repeat scroll 0% 0% / auto padding-box border-box;
font: normal normal normal 16px/16px'Times New Roman';
padding: 10px 10px 13px;
}
/*#DIV_1*/
#A_2 {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: none;
left: 5px;
position: fixed;
text-decoration: none solid rgb(255, 255, 255);
top: 43px;
z-index: 999;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 25px/25px'Source Sans Pro ExtraLight';
outline: rgb(255, 255, 255) none 0px;
}
/*#A_2*/
#x {
box-sizing: border-box;
color: rgb(255, 255, 255);
cursor: pointer;
display: block;
float: right;
height: 44px;
text-decoration: none solid rgb(255, 255, 255);
width: 21px;
border: 0px none rgb(255, 255, 255);
font: normal normal normal 44px/44px'Source Sans Pro ExtraLight';
margin: -11px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}
/*#A_3*/
#entire-content-section {
box-sizing: border-box;
height: 113px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_4*/
#IMG_5 {
box-sizing: border-box;
display: block;
float: left;
height: auto;
width: 40px;
font: normal normal normal 16px/16px'Times New Roman';
margin: 0px 10px 0px 0px;
}
/*#IMG_5*/
#top-content-section {
box-sizing: border-box;
height: 90px;
width: 350px;
font: normal normal normal 16px/16px'Times New Roman';
}
/*#DIV_6*/
#content-header {
box-sizing: border-box;
height: 56px;
width: 350px;
font: normal normal normal 28px/28px league_gothicregular;
margin: 0px;
padding-top: 1%;
}
/*#H3_7*/
#middle-content {
box-sizing: border-box;
font: normal normal normal 16px/16px'Source Sans Pro';
}
/*#SPAN_8*/
#content-bottom {
box-sizing: border-box;
color: rgb(0, 173, 237);
cursor: pointer;
display: block;
height: 12px;
letter-spacing: 1.6799999475479126px;
text-decoration: none solid rgb(0, 173, 237);
text-transform: uppercase;
width: 350px;
border: 0px none rgb(0, 173, 237);
font: normal normal normal 12px/12px'Source Sans Pro Black';
margin: 11px 0px 0px;
outline: rgb(0, 173, 237) none 0px;
}
/*#A_11*/
<div id="entire-block">
<a id="x">×</a>
<div id="entire-content-section">
<img src="http://www.ratemyprofessors.com/assets/average-icon-b4b6eb5e309d26486d76ecebe920220f.jpg?1455038037" id="IMG_5" alt='' />
<div id="top-content-section">
<h3 id="content-header">
Average
</h3> <span id="middle-content">Attending class is not necessary, but reading the textbook is a must. I attended all of his classes for ECON1000 but didn't find it helpful, so I never went to class for ECON1010. Do your readings and study from the test banks. With some effort, you're guaranteed to get an A. Would take his class again.</span>
</div>
Find out what students are saying.
</div>
</div>

Answer 1

You have fixed the height that's why it is showing of fixed height. Remove height from #entire-content-section and #top-content-section.