Absolute div height being cut off inside relative div - html

Question

I'm having trouble getting one of my absolutely positioned divs to display correctly. It's getting cut off unless I set a height for the parent (relative) div which I can't do as I will never know the height required.
I originally wasn't using any absolute positioning but the contents of the comm div were wrapping underneath the avatar div so I thought absolute positioning would fix it and it has, apart from the text being cut off at the bottom.
This is the structure and you can see what's happening in this fiddle.
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: block;
overflow: hidden;
position: absolute;
left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
display: block;
position: absolute;
left: 70px;
top: 20px;
height: 100%;
}
<div class="main">
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
John Doe
<div class="posted">8 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet.
</p>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png" />
<div class="top">
Jimmy Doe
<div class="posted">18 mins ago</div>
</div>
<p class="comm">Ut enim ad minim veniam.
</p>
</div>
</div>

Answer 1

Try using this modified css code.
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin: 20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
position: relative;
}
a.avatar {
width: 45px;
height: 45px;
border-radius: 50%;
overflow: hidden;
display: inline-block;
float: left;
margin-right: 10px;
position: relative;
}
a.avatar img {
width: 100%;
}
.top {
display: flex;
margin-left: 70px;
}
a.name {
font-weight: bold;
margin-right: 10px;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
}
p.comm {
display: block;
margin-left: 70px;
height: 100%;
}

Answer 2

You need to wrap .top and .comm in a div and with the use of flex you can achieve it
body {
background: #212121;
font-family: arial;
}
.main {
width: 80%;
margin:20px auto;
}
.wrap {
width: 100%;
background: white;
padding: 10px;
overflow: hidden;
position: relative;
display: flex;
}
a.avatar {
margin-right: 10px;
}
a.avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
}
.top {
width: 100%;
overflow: hidden;
}
a.name {
font-weight: bold;
margin-right: 10px;
float: left;
}
.posted {
color: #BBB;
font-size: 12px;
padding-top: 3px;
float: left;
}
p.comm {
margin-top: 5px;
}
.right {
max-width: 88%;
}
<div class="main">
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do </p>
</div>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="wrap">
<img src="http://www.tangoflooring.ca/wp-content/uploads/2015/07/user-avatar-placeholder.png">
<div class="right">
<div class="top">
Jane Doe
<div class="posted">11 mins ago</div>
</div>
<p class="comm">Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
Working fiddle here

Answer 3

Just modify on your p.comm selector like below:
p.comm {
display: block;
position: relative;
top: 10px;
padding-left: 60px;
}