css – Ocupar todo el espacio disponible en las columnas


Estoy realizando una maquetación de una vista web con un contenedor, dentro de el, tres columnas y un footer, estoy tratando de que aunque las columnas estén vacías que ocupen todo el espacio disponible hasta llegar al footer, he intentado lograrlo con flexbox pero no consigo que lo ocupe.

No puedo usar unidades absolutas ya que el tamaño de la pantalla es variable y quedaría mal.

footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #000;
  color: white;
}
.wrapper {
  padding: 50px 0 172px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
*{
   border:1px solid red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class="col-4">col 1</div>
      <div class="col-4">col 2</div>
      <div class="col-4">col 3</div>
    </div>
  </div>
  <footer>
    <div class="container">
      <div class="row" >
        <div class="col-12 justify-content-center">
          <p class="text-center">footer</p>
        </div>
      </div>
    </div>
  </footer>
</div>

¿Cómo puedo hacer para que las columnas ocupen hasta el footer?