Bootstrap4 - 2 columns: left scroll, right fixed map

Question

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:

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

Answer 1

Here's an example that uses a fixed sidebar: https://jsfiddle.net/Lbn21js8/1/

I added an id selector to the sidebar, and a background color:

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

With this CSS:

#sidebar {
  border-right: 1px solid black;
  overflow-y: scroll;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
}

The linked jsFiddle appends a new paragraph to the sidebar every 1.5 seconds, so if you wait long enough you'll see the sidebar's scrollbar become active/scrollable.

With this, as long as you constrain the map section to never be bigger than the viewport, you won't see a scrollbar for the page.

Answer 2

I used this CSS and it worked for me:

CSS:

#map {
    margin-left:20%;
    position:fixed;
}

This will allow the left column col-md-2 to be scrollable and prevent the right column col-md-10 from scrolling. By adding margin-left:20%;, the right column won't overlap the content on the left.