Div's of equal height, flex and height not working? - html

Question

I've creating a block called textCard in WPBakery. The markup for this block is wrapped around default Bakery classes which is rending the markup like this:
.textCard {
border: 1px solid red;
display: flex;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is heading</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is header</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Unsure why the above CSS works when the wrappers are removed:
.textCard {
border: 1px solid red;
display: flex;
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing </p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<p>Lorem ipsum dolor </p>
</div>
</div>
</div>
</div>
</div>
</div>
.vc_column-inner and .wpb_wrapper have no styles assigned to them so unsure what may be causing this result?

Answer 1

When you put your textCard in to a wrapper then force it to be 100% height, it will take 100% height of the parent wrapper, which in this case had the default property of height: auto; so it was collapsed.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. - W3Schools
The reason it worked when you took out the 2 wrappers is because the col-sm-4 was full height as it got the property align-items: stretch; by default as its parent is display: flex;.
Simply adding a rule to make the wrappers 100% height of their parents as well as textCard fixes this issue.
View CodePen
.textCard {
border: 1px solid red;
display: flex;
}
.vc_column-inner,
.wpb_wrapper,
.textCard {
height: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row justify-content-center">
<div class="container test d-flex">
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is heading</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="vc_column-inner">
<div class="wpb_wrapper">
<div class="textCard">
<div class="textCard__container">
<div class="textCard__content text-left">
<h3>This is header</h3>
<p>This is content</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

This is because your styling is no longer affected by actual height, since it's nested with two <div>elements. Following style should be child of class="col-sm-4"
Change style to
.vc_column-inner {
border: 1px solid red;
display: flex;
height: 100%;
}
or move <div class="textCard"> under <div class="col-sm-4">

Answer 3

If i've understood correctly, you don't need to use the bootstrap .col-4 class if you're using display:flex.
You've set the height of the items to be 100% and as display:flex so that means they'll fit the 100% height.
However this happens by default if you set the .container to display:flex and the children .textCard to flex:1 they'll all display equal. The children are set as align-items: stretch by default due to their flex container.
See codepen here, hope that's what you meant!
https://codepen.io/Robhern135/pen/LKaGVL