Table height in antd (React + Ant Design)

Question

I've encountered 2 issues while adding antd's table to my webpage.

1st - I don't see my webpage scrollbar anymore 2nd - I can't properly increase the height of antd table.

The component layout goes like so:

  <App>
   <Homepage>
    <Layout style={{ minHeight: "100vh" }}>
     <Content style={{ padding: "20px 50px", marginTop: 64 }}>
      <Cards>
       <div className="jobs-table-wrap">
        <Table scroll={{ y: 520 }}>
        </Table>
       </div>
      </Cards>
     </Content>
     <Footer className="footer">
     </Footer>
    </Layout>
   </Homepage>
  </App>

SCSS files for the app

app.scss

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.ant-alert-content {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-style: italic;
  padding-right: 30px;
}
.ant-layout-header {
  z-index: 1000 !important;
  background-color: #0747a6 !important;
}

.ant-menu-horizontal {
  width: 100% !important;
}
.ant-menu-overflow {
  display: block !important;
}
.header-link {
  color: #fff;
}
.ant menu,
.ant-menu-dark {
  background: #0747a6 !important;
  color: white !important;
}

.ant-menu.ant-menu-dark,
.ant-menu-dark .ant-menu-sub,
.ant-menu.ant-menu-dark .ant-menu-sub {
  background: #0747a6 !important;
  color: white !important;
}

.float-right {
  float: right !important;
}

.ant-picker-date-panel {
  border-right: 2px solid black;
}

.mt20 {
  margin-top: 20px !important;
}
.mr20 {
  margin-right: 20px;
}
.mr40 {
  margin-right: 40px;
}
.ml20 {
  margin-left: 20px;
}

.select-selector-pu {
  .ant-select-selector {
    height: 40px;
  }
}

.date-panel {
  input {
    margin-bottom: 0px;
  }
}

Homepage.scss

.logo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 750px;

  .app-title {
    height: 100%;
    display: flex;
    line-height: 1;
    color: white;

    font-size: 24px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
  }

  .separator {
    height: 100%;
    width: 2px;
    background-color: #f0f2f5;
    transform: rotate(10deg);
  }
}
.buttons-col {
  text-align: center;
  width: 180px;
  .btn-wrap {
    button {
      margin: 0 2.5px;
      color: white;
    }
  }
}
.red-bg {
  background-color: #f8485e !important;
}
.ant-menu-dark .ant-menu-item .whitebtn {
  color: white;
  font-weight: 700;
}

.ant-layout-header {
  display: flex;

  .logo {
    position: relative;
    width: 120px;
    height: 100%;
    margin-right: 20px;
    margin-bottom: 40px;

    img {
      position: absolute;
      width: 100%;
      top: 10px;
      left: 0;
    }
  }
}

.footer {
  text-align: center !important;
  font-weight: bold !important;
  color: white !important;
  background-color: #0747a6 !important;
  margin-top: 50px !important;
}

.user-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
  .user-info-wrap {
    margin-left: 14px;
  }
}
.ant-menu-item-group-title {
  display: none;
}

Cards.scss

.ant-col {
  .ant-input-group-addon {
    .ant-btn,
    .ant-btn-primary,
    .ant-btn-lg,
    .ant-btn-icon-only,
    .ant-input-search-button {
      &:hover {
        transform: none;
      }
    }
  }
  .ant-btn-mr20,
  .ant-btn-lg,
  .ant-btn-icon-only,
  .red-bg {
    background-color: #ff4d4f;
    color: white;
    margin-right: 95px;
    &:hover {
      background-color: #ff4d4f;
      color: white;
      transform: scale(1.1);
    }
  }
}
.jobs-table-wrap {
  .ant-table-cell {
    padding: 3px 13px !important;
  }
}
.ant-table-header,
.ant-table-sticky-holder {
  .ant-table-thead {
    .ant-table-cell {
      padding: 10px 10px !important;
      background-color: rgb(214, 214, 214);
    }

    .ant-table-column-has-sorters {
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: rgb(214, 214, 214);
    }
  }
}

.cancel-swal {
  .swal-footer {
    display: flex;
    justify-content: space-between;
  }
  .swal-button--cancelSend {
    background-color: #1890ff;
  }
  .swal-button--cancelNormal {
    color: white;
    background-color: #ff4d4f;
  }
}
a.ant-picker-now-btn {
  font-size: 0;
}

a.ant-picker-now-btn:after {
  content: "Današnji datum";
  font-size: 16px; /* original font size */
}

.ant-dropdown,
.ant-dropdown-placement-bottomLeft,
.ant-dropdown-hidden {
  .ant-table-filter-dropdown {
    .stupac {
      .ant-checkbox-wrapper,
      .ant-checkbox-group-item {
        display: block;
        margin-right: 0;
      }
    }
  }
}

.ant-notification-center {
  left: 50%;
  bottom: 50% !important;
  margin-right: 30%;
  transform: translate(-50%, -50%);
}

.buttons-col {
  text-align: center;
  width: 140px;
  .btn-wrap {
    button {
      margin: 0 2.5px;
      color: white;
    }
  }
}

.ant-picker-panel-container {
  .ant-picker-panel {
    .ant-picker-time-panel {
      display: none;
    }
  }
}

.table-top-wrap {
  display: flex;
  justify-content: space-between;
  .total-cards {
    text-align: left;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-style: italic;
  }
  .refresh-btn {
    font-size: 25px;
  }
}

My thinking was that I need to increase the scroll property of the table. Generally it's set at y:420, but when I increase it to y:520, the footer completely disappears and I can't properly increase the height.

After increase

I wan't to be able to scroll through my webpage and my antd table and also to reduce the distance between Table+Pagination and the Footer