不等高div的CSS列对齐

Question

我试图重新创建不相等高度的div对齐。这里是JSFiddle的链接:JSFiddle

根据给出的例子，如果只有一个孩子存在，它应该居中，否则孩子应该并排在2列中。我用flex实现了这一点但我遇到了一个问题如果子元素的高度很大就会留下很大的空间如图fiddle withdiv

SCSS代码:

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>

Answer 1

我认为你要求的是两列相等的高度?从> licss块中移除height: fit-content;，高度应该相等。

Answer 2

您可以从子属性中删除height属性。这将导致两个子节点都取满高度。

高度:适合内容;