How to fit several iframes into a single page without scrolling?

I am attempting to create a single page desktop site using uikit css framework that will contain a bunch of iframes (videos). Works great except whenever the amount of videos exceeds the size of my browser I get a scroll bar. With my current setup, is it possible for me to make all of these iframes fit into the page regardless of browser size?

Here's the code (should work fine locally for anyone who tries it)

<html>

<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.3/js/uikit-icons.min.js"></script>
</head>

<body>

<div class="uk-section uk-section-primary uk-padding-remove-vertical">
<nav class="uk-navbar uk-navbar-container uk-navbar-transparent uk-padding-small">
 <div class="uk-navbar-left">
  <a href="" uk-icon="icon: menu"></a>
 </div>
</nav>
</div>

<div class="uk-flex-wrap uk-grid-small uk-child-width-1-3@m uk-child-width-1-2@s uk-flex-center uk-text-center" uk-sortable="handle: .uk-card" uk-grid>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 <div>
  <div class="uk-card uk-card-default uk-card-hover uk-card-body uk-card-small">
   <iframe width="100%" height="30%" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allowfullscreen></iframe>
  </div>
 </div>
 </div>

</body>
</html>

Solution

I solved this by making my own grid since I could not do it with UIKit. It is 100% responsive and the contents of the grid stay inside the viewable area of the browser regardless of the size, columns, or rows.

Here's an example:

.wrapper {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
}

<div class="wrapper">
<div>
  <iframe
  src="..."
  height="100%"
  width="100%"
  allowfullscreen="true">
  </iframe>
</div>
<div>
  <iframe
  src="..."
  height="100%"
  width="100%"
  allowfullscreen="true">
  </iframe>
</div>
</div>