Here is my JSFiddle...<https://jsfiddle.net/5xt7pt7f/>

I get that there is a lot going on here, I will try to isolate my issue as best as possible.

There are two parent wrappers...

```
<div class="video-section">
...
<div class="chat-section">

```

As you can see in the fiddle, their height is not 100%, it seems to have some sort of max-height because they do not always fill the page. My html structure is something like...

```
 <div id="app">
     ...
     <div class="chat-navbar">....</div>

     <div class="chat-wrapper">

         <div class="video-section">

         <div class="chat-section">
     ...

```

`#app` is the main container. I want `.chat-navbar` to be at the top and the `.chat-wrapper` to be below it. I accomplished this through...

```
 div#app {
     display: flex;
     flex: 1;
     flex-direction: column; }

```

Next I wanted `.video-section` and `.chat-section` to be side by side, I accomplished this through...

```
.chat-wrapper {
    display: flex;
    flex: 1;
    flex-direction: row;
}

```

However, these two wrappers do not fill the height of the page. I do not care if the canvas elements inside fill the page, but I do need the parent wrappers to fill up the page.

This is what it look like on my local...

[![enter image description here](https://i.stack.imgur.com/4zYDR.png)](https://i.stack.imgur.com/4zYDR.png)

As you can see there is a lot of white space at the bottom because the elements do not have full height. I thought `flex:1` would have resolved this.