Make div fill rest of the page

Ionic Framework ionic-v3
1

Hello everyone,
I have two div containers (.user_img_wrapper and .user_description) on my page with the following CSS:

  .user_img_wrapper {
    position: relative;
    width: 100%;
  }

  // Gives div the same height as width depending on screen size
  .user_img_wrapper:before {
    content: "";
    display: block;
    padding-top: 100%;
  }

  .user_description {
    position: relative;
    padding: 20px;
    font-size: 18px;
  }

Now I want my .user_description div to fill the rest of the height left from the .user_img.
If I add “height: 100%” to .user_description, the div gets bigger than the screen and the page starts scrolling.

How can I fix this?