Responsive view like Whatsapp web using Boostrap 4 and Ember

I'm trying to implement Whatsapp web like UI. I'm using Bootstrap 4 and Ember 3.2. The base idea is working now. I've done the message box which is on the bottom of the view (using fixed-bottom Bootstrap class). I've messages list which is automatically scrolling down using jQuery inside list container custom component like:

export default Component.extend({
    didRender() {
        this.$().parents('html, body').scrollTop(this.$(document).height()); // Scroll immediately
    }
});

Here I have the margin set for list:

    <div id="ember390" class="ember-view">
    <div class="container-fluid pt-5" style="border: 1px solid red;margin-bottom: 32vh;">
            <div class="d-flex flex-column">
                <div class="p-2">
                    1
                </div>
                <div class="p-2">
.......

I'm adding margin-bottom: 32hv which is "lifts up" the message list on the message input box. This solution works on full HD screens. Once I'm trying the same view on small displays the margin-bottom: 32hv is not enough because of Bootstrap responsive.

I've got one solution, but not sure is it correct. I can calculate the margin-bottom value by window size and message box container.

Is it only one way, or can I do the same with pure CSS?

Another issue is to use jQuery with Ember.js, so I can't get access to message input container inside the message list container component.

Here is example https://www.bootply.com/QKVffslOIf