[Python] Table having same height in html css code causing blank space [closed]

Below is the part of my html css code which is been rendered throug jinja2 in python the issue here is the data which i want to show is a variable data table there is a single header and multiple rows as per data, the issue comes with table height Let’s consider an example where we have four tables created dynamically in a loop based on the data provided. The first table contains only one row of data, so its height is calculated as 200px(height is not given its just an example). The second table has two rows of data, and its height becomes 400px. Similarly, the third and fourth tables also have two rows of data, resulting in a height of 400px for each.

When the HTML is rendered, it is observed that all the table containers (.table-container) take the height of the tallest table, which is 400px. This causes an issue where the first table, which has only one row, displays additional blank space below its content to match the height of the other tables. This creates an uneven and undesirable layout.

To resolve this, I tried all but issue still there.

also attaching the screenshot where you can see extra blank space currently all the content is arranged in column as I changed the code below.


* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
/* align-items: center; */
background-color: transparent;
flex-wrap: wrap;
}

.outer-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
padding: 1px;
}

.container {
display: grid;
flex-wrap: wrap;
justify-content: space-evenly;
/* width: 100%; */
padding: 1px;
}

.table-container {
/* flex-direction: column; */
border: 8px solid grey;
margin: 5px;
}

<!-- Looping through the header and content -->
{% for header, guide_data in cutting_raw_material_guide.items() %}
<div class="outer-container">
<div class="container">
<div class="table-container">
<!-- Header Section -->
<div class="header">
<div class="header-text">{{ header }}</div>
</div>
<!-- Loop through content for each header -->
{% endfor %}

Continue reading...