How to standardize vertical box size with CSS?

Question

I have the following CSS:

.course-content {
    padding-top: 22px;
    padding-bottom: 30px;
}

Inside the PHP loop, I search the database records. Stay that way:

With this, I noticed that it got different sizes. How can I standardize the height? I would not like to define a fixed height.

Answer 1

I don’t know if it will suit you exactly, but there is a CSS-only solution that can help you with this.

Using FlexBox you can set an auto pro height Container. So it will grow as the size of the div daughter who has the most content. And the "sisters" Ivs will follow the height of the "sister" tallest.

See the example to better understand.

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 12px
}
.container {
	max-width: 600px;
	margin: 20px auto;
	display: flex;
	border: 1px solid #ccc;
}
.item {
	margin: 5px;
	padding: 0 10px;
	background: tomato;
	text-align: center;
	font-size: 1.5em;
	flex: 1;
}
h4 {
	text-align: center;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

<h4>A altura do .container eh definida pelo tamanho do conteúdo da maior div filha</h4>
<section class="container">
	<div class="item flex">Teste 1</div>
	<div class="item flex">Teste 2 Teste 2</div>
	<div class="item flex">Teste 3 Teste 3 Teste 3</div>
	<div class="item flex">Teste 4 Teste 4 Teste 4 Teste 4 Teste 4</div>
</section>
<section class="container">
	<div class="item flex">Teste 1</div>
	<div class="item flex">Teste 2 Teste 2</div>
	<div class="item flex">Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4 Teste 4</div>
	<div class="item flex">Teste 3 Teste 3 Teste 3</div>
</section>

A Well Taught Guide on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/