Responsive box grid with bootstrap-4 different box heights - css

Question

I tried to make a responsive grid of 6 textboxes with the box class and bootstrap.
My problem is , that with different amount of text in it the box they have different widths / heights, but i want them to have the same max-height / max-width as the box with the most text in it.
Is there a chance to get this done without hard-coding the width / height for all boxes?
Here's a code snippet:
/***** Box *****/
.flex-box {
position: relative;
text-align: center;
margin-top: 10px;
margin-right: auto;
margin-bottom: ;
margin-left: auto;
padding: 40px;
transition: all 0.3s ease;
background-color: rgb(170, 230, 255);
}
.flex-box:hover {
margin-top: 5px;
margin-bottom: 5px;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}
<!-- Textbox-Sections -->
<section id="about_me" class="section-padding title">
<div class="container-fluid">
<div class="container pt-4">
<h1 class="title">About me</h1>
<div class="row">
<div class="col col-12 col-sm-6 col-lg-4">
<div class="flex-box">
<h1 class="boxtitle">My way</h1>
<p class="lead">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti fuga iusto aspernatur magni rem quas deserunt repellendus hic fugit amet tempora labore perferendis, voluptate possimus itaque cum molestias dolores. Omnis?</div>
</p>
</div>
</div>
<div class="col col-12 col-sm-6 col-lg-4">
<div class="flex-box">
<h1 class="boxtitle">My way</h1>
<p class="lead">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse voluptatum soluta cum provident explicabo fugiat dolores odit blanditiis dolorem magni. Quaerat temporibus doloremque beatae voluptatum dignissimos? Eligendi voluptatum similique
incidunt!
</div>
</p>
</div>
</div>
<div class="col col-12 col-sm-6 col-lg-4">
<div class="flex-box">
<h1 class="boxtitle">My way</h1>
<p class="lead">
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate ipsam neque recusandae similique. Inventore repellendus aliquid delectus explicabo dolore sapiente voluptas nihil dolorem tempore voluptates, nemo ipsum cumque animi quidem.</div>
</p>
</div>
</div>
<div class="col col-12 col-sm-6 col-lg-4">
<div class="flex-box">
<h1 class="boxtitle">My way</h1>
<p class="lead">
<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod illo incidunt nihil praesentium minus itaque hic, soluta dicta cupiditate quos dolorum esse, harum placeat, qui veritatis animi sunt? Ab, nobis.</div>
</p>
</div>
</div>
<div class="col col-12 col-sm-6 col-lg-4">
<div class="flex-box">
<h1 class="boxtitle">My way</h1>
<p class="lead">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, fuga vel. Maxime hic tempore quo animi ex vero doloribus dolores quos, sapiente delectus dolor et laborum amet quam aspernatur earum.</div>
</p>
</div>
</div>
<div class="col col-12 col-sm-6 col-lg-4">
<div class="flex-box">
<h1 class="boxtitle">My way</h1>
<p class="lead">
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dicta, repellendus distinctio ratione autem consequatur rerum libero nesciunt ullam eaque molestias odit architecto nisi incidunt quasi omnis ut. Natus, exercitationem alias.</div>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
Here's a link to the CodePen site
Thanks

Answer 1

Just make the .flex-box height:100% so that it fills the col-*...
https://codepen.io/anon/pen/GQORQV?editors=1100
.flex-box {
position: relative;
text-align: center;
margin-top: 10px;
margin-right: auto;
margin-bottom:;
margin-left: auto;
padding: 40px;
height: 100%;
transition: all 0.3s ease;
background-color: rgb(170, 230, 255);
}

Answer 2

I don't think that is possible with only with css but yes if you are making these boxes vertical I mean one to each other then definitely its possible but not horizontally. Same height possible in the grid if section are align one to each other like --

Answer 3

As #Abhijeet stated it is only possible to use css if the boxes are horizontally aligned. Otherwise you can use this jQuery snippet:
var max_height = 0;
var max_width = 0;
$('.equal-size').each(function(e) {
h = $(this).height();
if(typeof(h) != "undefined") {
if(h > max_height) {
max_height = h;
}
}
w = $(this).width();
if(typeof(w) != "undefined") {
if(w > max_width) {
max_width = w;
}
}
});
if(max_height > 0) {
$('.equal-size').height(max_height);
}
if(max_width > 0) {
$('.equal-size').width(max_width);
}
You need to give the elements the class equal-size.
It is looking for the max height/width and applying it to every element.
This is only working if you have only one group of elements that should have same height/width. If you have more you need to give the group numbers and change the classes appropriately (equal-size-1, equal-size-2, ...) and use this snippet:
var numberOfGroups = 2;
for(var i=1; i<numberOfGroups+1; i++) {
var max_height = 0;
var max_width = 0;
$('.equal-size-'+String(i)).each(function(e) {
h = $(this).height();
if(typeof(h) != "undefined") {
if(h > max_height) {
max_height = h;
}
}
w = $(this).width();
if(typeof(w) != "undefined") {
if(w > max_width) {
max_width = w;
}
}
});
if(max_height > 0) {
$('.equal-size-'+String(i)).height(max_height);
}
if(max_width > 0) {
$('.equal-size-'+String(i)).width(max_width);
}
}