transform:scale() makes elements on bottom right to disappear

THIS HAPPENS ONLY ON GOOGLE CHROME, WINDOWS 10

I am working on a flipbook that checks user's screen size and using transform:scale() shows content as big as possible. Then there is a zoom button that increases/decreases the scale factor. I am catching the mouse down and move events and allowing the user to scroll by dragging with the mouse. The app is built with the help of Angular. The problem I face is that when user zooms quite a lot, the contents at the right-bottom disappear. Here is a live link http://bg.e-prosveta.bg/fulldemo/4iyEkxtEbY-946/40?page=11. The page structure is as:

<div class="outer-pages-wrapper" [ngStyle]="{'max-width': (containerWidth - 100) + 'px', width: ((ebook.width * ebook.scaleFactor) + (hideRight ? 0 : (ebook.width * ebook.scaleFactor))) + 'px', height: (ebook.height * ebook.wrapperScaleFactor) + 'px'}">
  <div class="inner-pages-wrapper" [ngStyle]="{transform:'scale(' + ebook.scaleFactor + ')', '-ms-transform':'scale(' + ebook.scaleFactor + ')','-webkit-transform':'scale(' + ebook.scaleFactor + ')'}">
    <app-ebook-page></app-ebook-page>
    <app-ebook-page></app-ebook-page>
  </div>
</div>

Some relevent CSS rules:

.outer-pages-wrapper {
  display:flex;
  overflow: hidden;
}
.inner-pages-wrapper {
  transform-origin: left top;
  -ms-transform-origin: left top;
  -webkit-transform-origin: left top;
  display:flex;
}

Here is a screenshot of what happens after zooming 5-6 times on Chrome for Windows:

Solution

.w2.h2 {
  overflow: visible;
}

seems to fix the issue.