Scrolling Flexbox Grid-CodePudding

I'm trying to make a basic dashboarding layout with three columns and various different size boxes to hold graphs/tables/stats etc. I am trying to make the main dashboard a scrollable element, with navbars and other elements being stationary around it. My problem is that the scrolling doesn't allow me to scroll through all the different boxes, only 1 and a half of the rows. If anyone could assist me on this that would be awesome!

body {
  overflow: hidden;
}

.app {
  overflow: hidden;
}

.dashboard {
  width: 1280px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 20px;
  margin-left: 150px;
  overflow-y: auto;
}

.graph-box {
  width: 350px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.graph {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.table-box {
  width: 740px;
  height: 350px;
  border-radius: 20px 20px;
  background: #373737;
  color: white;
}

.table {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
}

<body>
  <div id="app">
    <div >
      <div >
        <div >
        </div>
      </div>
      <div >
        <div >
        </div>
      </div>
      <div >
        <div >
        </div>
      </div>
      <div >
        <div >
        </div>
      </div>
      <div >
        <div >
        </div>
      </div>
      <div >
        <div >
          <table>
            <tr>
              <th>Col1</th>
              <th>Col2</th>
              <th>Col3</th>
            </tr>
            <tr>
              <td>Alpha</td>
              <td>Beta</td>
              <td>Gamma</td>
            </tr>
            <tr>
              <td>Delta</td>
              <td>Epsilon</td>
              <td>Zeta</td>
            </tr>
          </table>
        </div>
      </div>
      <div >
        <div >
        </div>
      </div>
    </div>
</body>

CodePudding user response：

You can try setting the dashboard element height to 100vh (or whatever size it needs to be), so the scroll actually knows how much real estate it has.

https://codepen.io/daniilm/pen/JjOeWOy