Table breaks containing open layers control div

Question

I got an openlayers control which is positioned on the map with position:absolute. This div (its open an closeable) contains 3 components: a top header (just some text) a table (.middle) and a pager (.bottom)

.main {
  position: absolute;
  top: 4.5em;
  bottom: 10em;
  right: 0.5em;
  text-align: left;

  min-width: 200px;
  max-width: 600px;
  width: 100%;
}

.top {

}

.middle {
  overflow: auto;
}

.bottom {
  position: absolute;
  bottom: 0;
}

The pager should be shown always at the bottom no matter how high the div is in the end (responsive) and the table should have the full middle part. The table just breaks out of the div completely if it gets too long and is even outside the page itself.

Sideinfo: Its an Angular component with an Angular Material Table.

Answer 1

remove the bottom from .main and use margin + min-height instead

.main {
  position: absolute;
  top: 4.5em;

  // bottom: 10em;
  margin-bottom: 10em;
  min-height: 100%;

  right: 0.5em;
  text-align: left;
  min-width: 200px;
  max-width: 600px;
  width: 100%;
}