我不明白为什么我的带有height auto的div占用了其父级的全部高度

Question

我有一个div.grid，其中使用flexbox包含多个div.column。当div.column的高度由于内部内容较多而增加时，所有其他div.column的高度也会增加。

对我来说，这是无济于事的，因为它们的高度设置为自动。

此外，我的网格正在使用带有flex-wrap: wrap的弹性显示。我认为是造成这种情况的原因，但我没有找到任何解释为什么会改变孩子的身高。

我尝试以不同的组合和方式更改父级和子级的以下属性：位置，显示，高度。

这些只是计算的样式，不是我的实际代码。

div.grid {
    display: flex;
    flex-wrap: wrap;
    width: 960px;
}

div.column {
    display: block;
    flex-basis: 37.5%;
    flex-grow: 0;
    flex-shrink: 0;
    /* height is actually set to auto, but it is computed like this */
    height: 132px;
}

<div class="grid">
    <div class="column">something</div>
    <div class="column">something<br>else<br>here</div>
    <div class="column">something</div>
</div>

我希望当孩子们都没有相同数量的内容时，孩子们不会占据父母的全部身高。

Answer 1

LGSon在评论中表示赞同：

使用flex: display自动将align-items的默认值设置为stretch，以使子项的高度拉伸以填充包装器的高度。计算的属性中也没有显示它，这就是为什么它没有引起我检查的原因。

因此，解决方案是将align-items: flex-start添加到.grid。