Как увеличить размер дочернего div до высоты родителя?

Question

У меня есть 2 div s, выровненные по одной и той же линии, разделенные вертикальной линией, и я хочу, чтобы эта линия всегда имела высоту родителя div.

я пытался реализовать все найденные решения, но ни один из них не работает (не может использовать position:absolute и display:table или overflow:hidden на родителя не имеют никакого эффекта).

JSFIDDLE

Это мой код:

HTML:

<div class="parent-div"> 
    <div class="first-child"> 
    <span class="block">Item</span> 
    <span class="block">Item</span> 
    <span class="block">Item</span> 
    </div> 
    <div class="second-child"> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    </div> 
</div> 

CSS:

.parent-div { 
    background:green; 
    display: inline-block; 
    width: 100%; 
} 

.first-child, 
.second-child { 
    float: left; 
} 

.first-child { 
    width: 50px; 
    border-right: 2px solid red; 
} 

.second-child { 
    padding-left: 10px; 
} 

.block { 
    display: block; 
} 

Answer 1

Вы можете изменить display:inline-block к display:flex; в .parent-div

Проверить demo

Answer 2

если вы даете родительского Div дисплей в виде таблицы, как это:

.parent-div { 
height: 100%; 
display: table; 
} 

И для ребенка в Tabel-клетки и удалить поплавка что-то вроде этого:

.first-child, 
.second-child { 
    display:block; 
     height: 100%; 
    } 

Проверьте: https://jsfiddle.net/k45f4Ls2/5/