Я хотел добиться того, что когда пользователь наводит курсор на каждый ".child" элемент, он преобразует масштаб и показывает ".toggle" элемент, но сохраняет высоту дочерних элементов. Проблема заключается в том, что дочерние элементы расширяются и образуется пустое пространство, как показано на рисунке ниже. Как этого добиться с помощью чистого CSS?

При наведении появляется большое пространство, что совсем не так круто

смотреть демо-версию codesandbox

Обновлено: Теперь я решил эту проблему, добавив внутренний элемент обертки div, при наведении на который внутренний элемент будет иметь абсолютную позицию.

Ответы (1)

Если вы просто хотите сохранить высоту элементов-сестер, то добавьте этот CSS

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

Но все же вы можете видеть красный фон. Для этого вам нужно установить ".toggle" div с позицией.

2022 WebDevInsider