inside div always height of parent - 100% does not work, with title

Question

I cannot make the inside div to get the whole available space. The idea is to have a "tile" at the middle of the screen and all the content inside, taking all available space minus the padding, no matter the size of the screen, scrolled if necessary. The title is displayed vertically at the side of the tile. I cannot make it work - either the content is small and does not take all available space or takes to much space and does not scroll on small screen but overflow the tile. Adding "overflow: scroll" to the "wrapper" class hides the title. I am going in rounds.

<div class="block block_tile">
  <section>
    <div class="wrapper">
      <h3 class="title">My Service</h3>
      <a href="/" class="home" aria-label="back to home"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M575.8 255.5C575.8 273.5 560.8 287.6 543.8 287.6H511.8L512.5 447.7C512.5 450.5 512.3 453.1 512 455.8V472C512 494.1 494.1 512 472 512H456C454.9 512 453.8 511.1 452.7 511.9C451.3 511.1 449.9 512 448.5 512H392C369.9 512 352 494.1 352 472V384C352 366.3 337.7 352 320 352H256C238.3 352 224 366.3 224 384V472C224 494.1 206.1 512 184 512H128.1C126.6 512 125.1 511.9 123.6 511.8C122.4 511.9 121.2 512 120 512H104C81.91 512 64 494.1 64 472V360C64 359.1 64.03 358.1 64.09 357.2V287.6H32.05C14.02 287.6 0 273.5 0 255.5C0 246.5 3.004 238.5 10.01 231.5L266.4 8.016C273.4 1.002 281.4 0 288.4 0C295.4 0 303.4 2.004 309.5 7.014L564.8 231.5C572.8 238.5 576.9 246.5 575.8 255.5L575.8 255.5z"/></svg></a>
      <div class="content">
        <h1>Welcome to Our page. Please log in.</h1>
        <button type="submit" name="_continue" class="btn btn-primary">Login</button>
        <p>
          <a href="/workflow/registration" class="navlink--bold">You can register here.</a>
        </p>
      </div>
    </div>
  </section>
</div>

css:

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: $white;
  margin: auto;
  min-width: 72rem;
  max-height: 85vh;
  width: 72rem;
  min-height: 60rem;
  position: absolute;
  top: 20%;
  border: 4px solid $primary;
  padding: 6rem 8rem 6rem 8rem;
  color: $dark;
  font-size: small;

.content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  max-height: 100%;
  overflow: scroll;
  overflow-x: hidden;
  h1+p {
    margin-top: -2.5rem;
    margin-bottom: 5rem;
  }
  &::-webkit-scrollbar {
    display: none;
  }
  h2 {
    margin-bottom: 2rem;
    font-style: normal;
    font-weight: normal;
    font-size: 1.6rem;
    line-height: 3rem;
    text-align: justify;
  }
}
.title {
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 3.8rem;

  color: $white;
  position: absolute;
  bottom: -.5rem;
  left: 0;

  transform: rotate(270deg);
  transform-origin: 0 4rem;
}