Angular: CSS компонент сетки ошибок - инкапсуляция: к элементам сетки соседних элементов применяется стиль наведения

Question

У меня проблемы с обнаружением ошибки в моем коде, буду признателен за любую помощь. У меня есть компонент контейнера сетки с дочерними компонентами элемента сетки, созданными * ngFor. Дочерние компоненты принимают два входа:

1. Объект с именем rfpDo c
2. Featured: Boolean (Я разрабатываю выделенный элемент с помощью текста большего размера).

Анимация при наведении css работает для всех дочерних компонентов (масштабирование изображения с переполнением, установленным на скрытый), за исключением первого дочернего компонента (также является избранным элементом). При наведении указателя мыши на этот компонент каждый дочерний компонент увеличивает и переполняет контейнер сетки. Любая идея, почему это так?

Щелкните по URL-адресу Stack Blitz Обратите внимание, что самый большой элемент сетки при наведении мыши расширяет сетку и несколько увеличивает масштаб компонентов-соседей. Другие компоненты отдельных элементов сетки не имеют такого поведения, когда они находятся над ним.

Щелкните для редактора стека Blitz

Answer 1

Заменить

        &:hover{
           width: 105%;
           height: 105%;
           cursor: pointer;
        }

на

        &:hover{
           transform: scale(1.05);
           cursor: pointer;
        }