div 元素悬停时如何去除多余的空间？

问题描述

我想在这里实现的是，当用户将鼠标悬停在每个“.child”元素上，然后转换比例并显示“.toggle”元素但保持同级元素的高度时。问题是兄弟元素展开并在下图中显示空白。纯CSS如何实现？

see codesandbox demo

更新：我现在通过在悬停时添加一个内部 div 包装元素解决了这个问题，内部将是绝对位置。

解决方法

如果你只是想保持兄弟元素的高度，那么添加这个CSS

.parent {
    background-color: red;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

但是，您仍然可以看到红色背景。为此，您需要使用位置设置“.toggle”div。