Регулировка размера div, содержащего текст

Question

См. Пример здесь. http://jsfiddle.net/y638o46h/1/ (посмотреть на последнем изображении)

Я пытаюсь добавить текст по изображению, но с моим методом, если количество строк превышает высоту содержащего div переполнения текста. Есть ли способ настроить размер от div в соответствии с количеством строк.

<div class="relatedposts"> 
    <div class="relatedthumb"> 
    <img src="img1" > 
     <h3 class="justin-cover">Lets make this work</h3> 
    </div> 
    <div class="relatedthumb"> 
    <img src="img2" > 
     <h3 class="justin-cover">Lets make this work</h3> 
    </div> 
</div> 


* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    } 
    .relatedposts { 
    display:table; 
    width:1024px;font-size: 0; 
    /* fix inline gap */ 
    margin: 0 auto; 
    } 
    .relatedthumb { 
    float: left; 
    margin-left:5px; 
    position: relative; 
    margin-bottom:10px; 
    } 
.relatedthumb img { 
    text-align:center; 
    } 
.justin-cover { 
color: #fff; 
font-size: 30px; 
font-weight: 500; 
height: 30%; 
width: 100%; 
position: absolute; 
bottom: 0; 
left:0; 
background: rgba(0,0,0,0.5); 
padding: 10px; 
transition: all 0.5s; 
} 

Answer 1

Изменить этот

.justin-cover { 
    ... 
    height: 30%; 
    ... 
} 

Для этого

.justin-cover { 
    ... 
    min-height: 30%; 
    max-height: 100%; // Add this one too 
    ... 
} 

Answer 2

Если это приемлемо, вы можете установить перепускной свойство. переполнение: авто;