Using Bootstrap4 to create a two column layout, the left column should scroll (currently it's not) and the right column should not scroll (currently it does as shown by the scroll bar in the image). The map should always be the height of the window (referred to as the "viewport" in Bootstrap, I think). FYI, the contents of the left column grows with time as the server pushes more hosts into it:

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

HTML:

```
<div id="app">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-2">list of hosts (should scroll)</div>
            <div class="col-md-10" id="map">google map (should NOT scroll)</div>
        </div>
    </div>
</div>

```

CSS:

```
.col-md-2 {
    border-right: 1px solid black;
    min-height: 100vh;
    overflow-y: scroll;
    padding: 0;
}

```

Thanks