css column alignment for unequal height divs-CodePudding

I am trying to recreate alignment of divs with unequal heights. Here is the JSFiddle link: jsfiddle

As per the example give if only 1 child exists it should be centered, otherwise the children should be side by side in 2 columns. I achieved that using flex but I'm facing an issue that if the height of children is big it is leaving a big space as shown in fiddle with div "weird space above this box"

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>

CodePudding user response：

I think what you are asking for is the two columns to be equal height? Remove height: fit-content; from the > li css block and the heights should grow to be equal.

CodePudding user response：

You can remove height property from child. This will result in both the child taking full height.

height: fit-content;