Попытка использовать трансформацию: масштаб для сокращения элементов - они уменьшаются, но, кажется, застряли в контейнере оригинального размера

Question

У меня есть несколько больших width:100% гибких элементов, которые я пытаюсь сжать с помощью transform:scale. Я хочу, чтобы сжатые элементы разворачивались и появлялись рядом друг с другом на одной и той же линии, когда они становятся достаточно маленькими, но они просто остаются там, где они были, с большим количеством свободного места вокруг них. Похоже, они застряли в невидимом контейнере оригинального размера.

Я получаю что-то вроде крошечных элементов в большой коробке

, но хочу что-то вроде этого нет большой рамки вокруг элементов (я знаю, что высота здесь не такая, как она будет выглядеть)

var scaleFactor = 1;

function scale(scaleChange) {
  scaleFactor = scaleFactor + scaleChange
  $('.page').css('transform', `scale(${scaleFactor})`)
}

.book {
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  height: 500px;
  overflow: auto;
  background: gray;
  border: solid 3px blue;
}

.page {
  font-size: 50px;
  justify-content: center;
  align-content: center;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  background: pink;
  margin: 5px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <button onclick="scale(-0.2)">
    Smaller
  </button>
  <button onclick="scale(0.2)">
    Bigger
  </button>
</div>
<div class="book">
  <div class="page">A</div>
  <div class="page">B</div>
  <div class="page">C</div>
</div>

https://jsfiddle.net/kroq8av5/22/