Попытка получить 1 элемент для расширения при наведении курсора в контейнере flexbox. Вместо этого все элементы в контейнере расширяются

Мой желаемый эффект - иметь элемент (ссылку) в контейнере flexbox, который немного увеличивался или расширялся при наведении, но вместо этого весь ряд элементов увеличивался, когда я наводил курсор на один элемент. Я пытался сделать это, увеличив отступ, как вы увидите ниже.

В моем HTML-шаблоне используется синтаксис Angular 2+, но его нетрудно понять. Просто динамическое получение списка ссылок из цикла for.

Мы будем благодарны за любую помощь, предложения или полезные ссылки!

Мой CSS выглядит следующим образом ~

.page-flex-link {
display: flex;
flex-flow: row wrap;
bottom: 1rem;
left: 10%;
position: absolute;
}

.page-flex-link > div {
background-color: #28a745;
border-radius: 50%;
padding: .5rem;
margin-left: .2rem;
margin-right: .2rem;
cursor: pointer;
box-shadow: .2rem .2rem .2rem grey;
}

.page-flex-link > div:hover {
background-color: #0f82db;
padding: .6rem;
box-shadow: .3rem .3rem .3rem grey;
}

.pli-text {
color: white;
text-decoration: none;
}

Мой HTML-шаблон angular 7 выглядит следующим образом ~

<div class = "page-flex-link">
  <div *ngFor = "let page of lesson.pages"
    (click) = "goToPage(page.pageNum)">
    <a class = "pli-text" routerLink = "/lessons/{{lesson.id}}/pages/{{page.pageNum}}">{{page.pageNum}}</a>
  </div>