Bootstrap 4 Equal height columns not working - html

Question

I have two columns next to each other but the content inside them is different but the columns are different I was lead to believe this was default it bootstrap 4 or it was in one of the alphas at one point.
Currently I have tried.
.equal {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.equal > [class*='col-'] {
display: flex;
flex-direction: column;
}
and added that to my css.
and my html looks like.
<div class="row equal">
<div class="col-md-8"></div>
<div class="col-md-4"></div>
</div>
but it doesnt seem to affect it in any way.
edit seems like its not the column but the content inside said column that isnt 100% of its parent.
but if i do height: 100% it makes it 100vh for some reason and not 100% of the column height.
https://codepen.io/anon/pen/KBEegO
in this i have made divs inside it i need them divs 100% of the parent column
that is the current view of the row and column the border is on the inner div of the column.
I need it so if there is more content in the left column the right column is the same height as it and if the right column is as it is on the image the left column gets its height.

Answer 1

For div inside that, you can use position absolute with CSS transform and translate property.
.innerdiv {
top: 50%;
position:absolute;
left: 50%;
transform: translate(-50%, -50%);
}
This will make your inner div verticle and horizontal center.

Answer 2

I have updated the codepen please check https://codepen.io/anon/pen/KBEejz?editors=1100
.equal div div {
border: 1px solid green;
height: 100%;
display: flex;
flex: 1;
}
.equal>[class*='col-'] {
display: flex;
flex-direction: column;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row equal">
<div class="col-md-8">
<div>
<p style="background-color:pink;">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis quibusdam nobis praesentium hic vero quo quia error sed commodi cumque, illo porro eaque ad ipsa. Error maxime consequatur officiis alias fuga mollitia quas, magnam delectus necessitatibus
illum, quos aperiam doloremque eaque explicabo architecto dolor? Placeat quos nemo natus velit aliquam?</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci blanditiis commodi sapiente totam sequi consectetur provident. Voluptatibus corrupti odit reiciendis, aliquid temporibus dolores tempore optio delectus nesciunt ipsam veritatis quisquam
facilis voluptatem voluptates inventore aliquam, praesentium, assumenda ducimus ratione quasi nisi sunt consequatur corporis soluta. Deleniti quam harum soluta alias minima voluptas iusto voluptates, iure necessitatibus assumenda ex. Minus numquam
beatae vero aperiam cupiditate assumenda ipsam hic ad corporis placeat facere consequuntur consectetur sint, aspernatur mollitia optio odit eos officia nostrum? Totam asperiores quia sequi autem. Ex nostrum fuga, et, illo iusto inventore officiis
facere minima hic sint obcaecati consectetur.</p>
</div>
</div>
</div>