How can I expand a child div height to parent height?

Question

I have 2 divs aligned on the same line, separated by a vertical line and I want that line to always have the height of parent div.

I tried to implement all solutions found but none of them works (can't use position:absolute, and display:table or overflow:hidden on parent have no effect).

JSFIDDLE

This is my code:

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

You could change display:inline-block to display:flex; to .parent-div

Check demo

Answer 2

If you give the parent div a display as a table like this:

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

And for the child a tabel-cell and remove the float something like this:

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

Check this: https://jsfiddle.net/k45f4Ls2/5/