Div with height as rest blank space

Question

I have 2 divs on my 100% screen. One of them is aligned to bottom and has different heights on different devices. i need to set the height of the second div to be equal to the remaining space of the page and into this div i added an img that is also aligned to bottom of its own div. I am using flexbox but my first div has height as whole flexbox.

I need exactly this

https://i.stack.imgur.com/TTbVf.jpg

here is html :

<div class="flexing">
    <div class="div1">
        <img class="background" src="img/asset7.png">
    </div>
    <div class="div2">
        <div class="row">
                some text
        </div>
    </div>
</div>

And there is my css :

.flexing{
    display: flex;
    height: 100%;
    flex-direction: column;
}

.div1{
    width: 100%;
}
.div2{
    width: 100%;
    position:absolute;
    bottom:0;
}
.background {
    position: absolute;
    width: 100%;
    bottom: 0;
}