I have been working on aligning divs with varying heights and encountered a challenge. To view the layout I am referring to, check out this JSFiddle link: jsfiddle
Based on the example provided, if there is only one child element it should be centered. However, if there are multiple children, they should be displayed side by side in 2 columns. I managed to achieve this using flexbox. The issue I am facing now is that when the height of the children is large, it leaves a significant gap above the box labeled as "weird space above this box" in the fiddle.
SCSS code:
body {
background: grey;
}
.container {
max-width: 500px;
ul {
list-style-type: none;
background: white;
padding: 30px;
display: flex;
flex-wrap: wrap;
justify-content: center;
>li {
border: 2px solid black;
width: 42%;
height: fit-content;
padding: 5px;
margin: 10px;
}
}
}
HTML:
<div class="container">
<ul class="parent">
<li>child 1 </li>
</ul>
</div>
<div class="container">
<ul class="parent">
<li>child 1 </li>
<li>child 2 child 2</li>
</ul>
</div>
<div class="container">
<ul class="parent">
<li>child 1 </li>
<li>child 2 child 2</li>
<li>child child child child child child child child v child child child child child child child child child child child child child child </li>
<li>child child</li>
<li>child child</li>
<li>weird space above this box</li>
<li>child child</li>
</ul>
</div>