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

Question

Мой желаемый эффект заключается в том, чтобы элемент (ссылка) в контейнере 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 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>

Answer 1

Контейнер .page-flex-link вычисляет свои размеры на основе своих дочерних элементов.Когда вы увеличиваете отступ дочернего элемента, он также увеличивает общие размеры контейнера.

Простым решением будет использование CSS transform: scale() вместо увеличения заполнения.scale() увеличит размер отрисовки элемента, но не увеличит его расчетные размеры:

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

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

.page-flex-link > div:hover {
  background-color: #0f82db;
  /*padding: 0.6rem;*/
  transform: scale(1.2);
  box-shadow: 0.3rem 0.3rem 0.3rem grey;
}

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

<div class="page-flex-link">
  <div>
    <a class="pli-text">1</a>
  </div>
  <div>
    <a class="pli-text">2</a>
  </div>
  <div>
    <a class="pli-text">3</a>
  </div>
  <div>
    <a class="pli-text">4</a>
  </div>
  <div>
    <a class="pli-text">5</a>
  </div>
  <div>
    <a class="pli-text">6</a>
  </div>
  <div>
    <a class="pli-text">7</a>
  </div>
  <div>
    <a class="pli-text">8</a>
  </div>
  
</div>