CSS clearfix hack does not get applied to element with h2 inside it

Question

I have spent hours figuring out why my .clearfix does not properly push the parent element of h2 to fit the contents of inner tags.

I am sure I am missing something somewhere. Here is my CSS:

#epm-social-stream {
width:100%;
font-family:"Open Sans Regular",Helvetica,Arial!important;
color:#555;
}

#epm-social-stream .clearfix:after {
content:".";
visibility:hidden;
display:block;
height:0;
clear:both;
}

#epm-social-stream .btn-sm {
font-size:12px;
line-height:1.5;
padding:5px 10px;
}

#epm-social-stream .btn-default {
background-color:#fff;
color:#444;
border-color:#ccc;
}

#epm-social-stream .btn {
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
user-select:none;
background-image:none;
border:1px solid rgba(0,0,0,0);
border-radius:2px;
cursor:pointer;
display:inline-block;
font-size:14px;
line-height:1.42857;
margin-bottom:0;
text-align:center;
vertical-align:middle;
white-space:nowrap;
font-family:"Open Sans Regular",Helvetica,Arial!important;
padding:6px 12px;
}

#epm-social-stream h1,#epm-social-stream h2 {
font-family:"Open Sans Regular",Helvetica,Arial!important;
}

#epm-social-stream a {
cursor:pointer;
color:#0090ca;
text-decoration:none;
}

#epm-social-stream a:hover {
color:#0090ca;
text-decoration:underline;
}

#epm-social-stream ul {
list-style:none;
margin:0;
padding:0;
}

#epm-social-stream .epm-se-has-tooltip {
cursor:pointer;
}

#epm-social-stream div.epm-show-older {
cursor:pointer;
color:#ccc;
font-size:11px;
margin:5px 0 5px 50px;
}

#epm-social-stream div.epm-show-older:before {
content:"•••";
margin-right:5px;
position:relative;
top:1px;
}

#epm-social-stream div#epm-se-no-activity {
color:#ccc;
font-family:"Open Sans Light",Helvetica,Arial;
font-size:20px;
text-align:center;
display:none;
margin:0 auto;
}

#epm-social-stream li.epm-se-thread {
margin-bottom:20px;
}

#epm-social-stream li.epm-se-thread .epm-se-user-info a {
color:#555;
font-family:"Open Sans Semi Bold",Helvetica,Arial;
}

#epm-social-stream li.epm-se-thread div.epm-se-user-avatar {
float:left;
width:40px;
height:40px;
background-image:url(/_layouts/15/epmlive/images/default-avatar.png);
background-repeat:no-repeat;
-moz-background-size:40px auto;
-o-background-size:40px auto;
-webkit-background-size:40px auto;
background-size:40px auto;
margin-right:10px;
border-radius:50%;
}

#epm-social-stream li.epm-se-thread div.epm-se-user-avatar img {
width:40px;
height:40px;
border-radius:50%;
border:0 none;
}

#epm-social-stream li.epm-se-thread div.epm-se-thread-info {
float:left;
}

#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
float:left;
color:#0090ca;
height:40px;
line-height:40px;
}

#epm-social-stream li.epm-se-thread div.epm-se-thread-info span {
margin-right:10px;
}

#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
font-size:14px;
}

#epm-social-stream li.epm-se-thread span.epm-se-object-info {
display:inline-block;
height:40px;
line-height:40px;
}

#epm-social-stream li.epm-se-thread span.epm-se-object-info a:hover {
text-decoration:none;
}

#epm-social-stream li.epm-se-thread span.epm-se-activity-time,#epm-social-stream li.epm-se-thread span.epm-se-object-info {
color:#ccc;
font-size:11px;
margin-left:10px;
}

#epm-social-stream li.epm-se-thread span.epm-se-activity-time span.epm-se-workspace:after,#epm-social-stream li.epm-se-thread span.epm-se-object-info span.epm-se-workspace:after {
content:"|";
margin-left:4px;
position:relative;
top:-1px;
}

#epm-social-stream li.epm-se-thread li.epm-se-activity {
margin:2px 0;
}

#epm-social-stream li.epm-se-thread li.epm-se-activity span {
display:inline-block;
height:20px;
line-height:20px;
}

#epm-social-stream li.epm-se-thread li.epm-se-activity span.epm-se-activity-icon {
width:40px;
margin-right:5px;
text-align:right;
font-size:10px;
color:#999;
}

#epm-social-stream li.epm-se-thread div.epm-se-comments {
background-color:#f7f7f7;
border-radius:5px;
margin-left:25px;
margin-top:8px;
padding:5px 5px 5px 10px;
}

#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-show-older {
margin-bottom:10px;
margin-left:15px;
}

#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-user-avatar {
width:30px;
height:30px;
-moz-background-size:30px auto;
-o-background-size:30px auto;
-webkit-background-size:30px auto;
background-size:30px auto;
background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAMAAAApB0NrAAABQVBMVEUAkMoBkMoCkcoAjskAjMgFkssAj8oBkcpnvd++4/LW7fa/4/Jsv+ECkcsEkst9x+R4xOMAjckBj8oAi8gqo9Ps9/vb7/cUmM4+q9fm9Poro9Pu9/vY7vcmodIDkcsAjcheud30+v1Hr9kAisdlvN9JsNkendDQ6/W64fAPlc15xeNZtt0AiccAj8kBjskmodLa7/fE5fIZm88Bj8kEkcqr2u2NzecAi8cDksswpdTQ6vW+4/EmoNIDkcpCrdib0+rk8/ng8vmW0epDrdg6qdax3e/1+/3x+fyy3u8AjckCkMpLsNnp9frr9/tQs9sFkcsVmc7T7PbZ7vcZm9Bat91gud4AiMZ6xeP7/f7y+fzz+v3x+fx+x+QAh8YFkssxpdQbnNAnodIUmc7////+///9/v/8/v77/f7+/v/9/v75/P6hsBPiAAAAY3RSTlPm5ubm5efm5vD4+/jw5uby8eXm5er9++js/Or9++nm5e/+7OXv7en6+Ofx7uXm5ur7+ejm5vbz5ebq+vjp5uz0/Pz07Ov3/v735ubt/f3t5uj6++ju7+Tx/v3+/fLk5urp6eiKNt80AAABHUlEQVR4Xu2R11LCQBhGt5nYEg1BQRQQsQvYe++9916+TQK+/wM4GYcZEljunfFcn/l2/rPk70MZ0Qij9SVBGojQ6q1EZhqbmltazyNU7fA2CQDtaV2l6Fa0A6500TnFVUNMbH9LQMquqKUrd967IVFEz4dyJ2X3uvDZ6xNM5WT78cuA0qF8cAgOHAyPaMrjWXYUjpTO2LxBlE5hfAIeJmPTTJnQpHwWHuZyCymqWCHCWlyCi+UVSxBWu+Dq2voGfDa34qzWZcza2c2gzP5B/PCoqnH6+AQoSfgUS8DpWfhjaf7iEp4jyzgerq65Hkp8gzC3OTPgmHf3D49PmQqevZfXt9BbsUTys5Jk4isfjsRtEcTm1ZENFsSg5B/yA5SrSKpfw4TxAAAAAElFTkSuQmCC);
}

#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-user-avatar img {
width:30px;
height:30px;
}

#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment {
margin:5px 0;
}

#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment div.epm-se-user,#epm-social-stream li.epm-se-thread div.epm-se-comments li.epm-se-comment div.epm-se-comment-details {
display:table-cell;
float:none;
vertical-align:top;
}

#epm-social-stream li.epm-se-thread div.epm-se-comments div.epm-se-comment-text {
color:#777;
}

#epm-social-stream div.epm-se-comment-box {
margin:15px 0 0 25px;
}

#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input {
border:1px solid #eee;
border-radius:3px;
margin-bottom:10px;
min-height:20px;
padding:7px 10px;
}

#epm-social-stream div.epm-se-comment-box button {
float:right;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
user-select:none;
background-image:none;
border:1px solid rgba(0,0,0,0);
border-radius:2px;
cursor:pointer;
margin-bottom:0;
text-align:center;
vertical-align:middle;
white-space:nowrap;
font-family:"Open Sans Regular",Helvetica,Arial!important;
background-color:#fff;
color:#444;
font-size:12px;
line-height:1.5;
display:none;
border-color:#ccc;
padding:5px 10px;
}

#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input.epm-se-expanded {
min-height:75px;
}

#epm-social-stream div#epm-se-status-update-box {
display:none;
margin:0 0 20px;
}

#epm-social-stream div#epm-se-status-update-box div.epm-se-comment-input {
border:1px solid #ccc;
}

#epm-social-stream .btn-primary,#epm-social-stream div.epm-se-comment-box button.epm-se-active {
background-color:#0090ca;
color:#fff;
border-color:#357ebd;
}

#epm-social-stream a h2,#epm-social-stream a:hover h2 {
color:#0090ca;
}

#epm-social-stream .epm-se-hidden,#epm-social-stream div#epm-se-pagination span,#epm-social-stream li.epm-se-thread ul.epm-se-older-activities,#epm-social-stream li.epm-se-thread ul.epm-se-older-comments {
display:none;
}

#epm-social-stream li.epm-se-thread span.epm-se-activity-time a,#epm-social-stream li.epm-se-thread span.epm-se-object-info a,#epm-social-stream div.epm-se-comment-box div.epm-se-comment-input.epm-se-placeholder {
color:#ccc;
}

Here is my HTML:

<div id="epm-social-stream" style="visibility: visible; display: block;">
   <ul id="epm-se-threads">

      <li class="epm-se-thread clearfix" id="epm-se-thread-30b23238-90b2-4337-887a-acac6366bde1">
         <div class="epm-se-thread-header clearfix">
            <div class="epm-se-user-avatar">
               <img src="http://moon.epmlivedev.com/sites/epm56/User Profile Pictures/mpatel.png">
            </div>
            <div class="epm-se-thread-info clearfix">
               <span class="epm-se-thread-icon icon-bubble-12"></span>
               <h2>
                  Multi-line<br>comment<br>test<br>
               </h2>
            </div>
            <span class="epm-se-object-info">
            </span>
         </div>
         <ul class="epm-se-activities">
            <li class="epm-se-activity clearfix" id="epm-se-activity-3b9b7112-05c4-4328-88c6-a180b3a4c143">
               <span class="epm-se-activity-icon icon-bubble-12"></span>
               <span class="epm-se-user-info">
               <a class="epm-se-link" target="_blank" href="/sites/epm56/_layouts/15/userdisp.aspx?ID=17">You</a>
               </span>
               <span class="epm-se-activity-info">made a comment</span>
               <span data-placement="top" data-toggle="tooltip" title="Tuesday, April 8 2014 2:46 PM" class="epm-se-activity-time epm-se-has-tooltip">Today Apr 8</span>
            </li>
         </ul>
         <ul class="epm-se-older-activities"></ul>
         <div class="epm-se-comments epm-se-hidden">
            <ul class="epm-se-older-comments"></ul>
            <ul class="epm-se-comments"></ul>
            <ul class="epm-se-latest-comments"></ul>
         </div>
         <div data-threadid="30b23238-90b2-4337-887a-acac6366bde1" class="epm-se-comment-box">
            <div contenteditable="true" class="epm-se-comment-input epm-se-placeholder">Add a comment...</div>
            <button id="epm-se-comment-post-30b23238-90b2-4337-887a-acac6366bde1">Post</button>
         </div>
      </li>
   </ul>
 </div>

Here is a JS Fiddle.

Answer 1

You just need to remove the height: 40px from the h2 to allow it to extend to whatever height necessary.

Answer 2

#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2

currently fixes the height of h2 to 40px, any overflow is shown outside the h2 area, unless you add overflow:hidden;.

If you want it all shown either remove height or change it to min-height.

#epm-social-stream li.epm-se-thread div.epm-se-thread-info span,#epm-social-stream li.epm-se-thread div.epm-se-thread-info h2 {
float:left;
color:#0090ca;
min-height:40px;
line-height:40px;
}

I hope that helps.