maquetacion css3 con un container overflow (CSS3)

tengo una estructura donde a la derecha muestro una lista de items donde el contenedor tiene overflow-y pero al momento de que el alto de dicho container supera el 100% de la pagina se pasa y me genera un overflow en el body, yo quisiera que este container sin necesidad de ponerle un height fijo que me pueda detectar el 100% y me muestre el boton.
Este es mi codigo:

Buenas noches, tengo una estructura donde a la derecha muestro una lista de items donde el contenedor tiene overflow-y pero al momento de que el alto de dicho container supera el 100% de la pagina se pasa y me genera un overflow en el body, yo quisiera que este container sin necesidad de ponerle un height fijo que me pueda detectar el 100% y me muestre el boton.
Este es mi codigo:

  body {
    padding: 0;
    margin: 0;
    border: 0;
  }

  #global {
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
  }

  .col-izq {
    width: 100%;
  }

  .col-der {
    min-width: 400px;
  }
  .columnas{
    display:flex;
    height:100%;
  }
<div id="global">

  <div><div class="titulo--index flex-gen" style="padding:5px 0 10px 0">
  <div class="flex opaco-8" style="align-items:flex-end;"><img src="https://es.stackoverflow.com/images/iconos/ordenes.svg" class="mr10"
      width="23">Registrar reporte</div>
</div>

<div id-sect="form-local" class="mb10"  style="display:flex;">
  <div class="flex label-10" style="margin-bottom:0;"  style="display:flex;">
    <div class="form-label width mt15 children-width" id="label-mesa">
      <div class="titulo--label">Cliente/Paciente:</div>
      <div class="campo flex label-10"  style="display:flex;">
        <select class="ui-1" id="mesa" name="mesa">
          <option value="0">Seleccionar</option>
          <optgroup label="handrew">
            <option value="">Aurora</option>
            <option value="">Miribom</option>
          </optgroup>
        </select>
      </div>
    </div>
    <div class="form-label width mt15 children-width" id="label-medio-pago" style="margin-right:0">
      <div class="titulo--label" style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden;">Medio de pago:
      </div>
      <div class="campo flex label-10">
        <select class="ui-1" id="medio_pago_local" name="medio_pago">
          <option value="1">Efectivo</option>
          <option value="2">Tarjeta de credito/debito</option>
          <option value="3">Transferencia</option>
        </select>
      </div>
    </div>
  </div>
</div>
</div>

<div class="columnas">

  <div class="col-izq">
    soy la columna izquierda
  </div>
  <div class="col-der" style="height:100%;display:flex;flex-direction: column;">
    soy la columna derecha
    <div style="overflow-y: scroll;height:100%;">
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
      aca ahy items<br>
    </div>


    <div><button>Procesar</button></div>

  </div>
</div>
</div>

Si no pude explicarme en la pregunta les adjunto una imagen con lo que tengo y lo que quisiera:
introducir la descripción de la imagen aquí