CSS Vertical Navigation bar not full screen height on Safari

Question

I have the following HTML/CSS code for a vertical navigation bar:

HTML:

<div class="side-menu">
  <h2>
    Brand
  </h2>
  <div class="menu-top">
    <div class="menu-item" style="background-color: red">
    </div>
    <div class="menu-item" style="background-color: yellow"> 
    </div>
    <div class="menu-item" style="background-color: orange">  
    </div>
    <div class="menu-item" style="background-color: purple"> 
    </div>
  </div>
  <div class="menu-bottom">
    <div class="menu-item" style="background-color: blue">
    </div>
  </div>
</div>

CSS:

html,
body,
.side-menu {
  height: 100%;
  margin: 0;
}

h2 {
  color: white;
  text-align: center;
}

.side-menu {
  display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;
  background-color: black;
  width: 115px;
}

.menu-top {
  flex: 1;
  overflow-y: auto;
}

.menu-item {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 10px;
}

See https://jsfiddle.net/mehg8uL2/ (please ensure you are using the columns view).

On Chrome and Firefox it works fine. ie. the Blue dot is at the bottom of the vertical navigation bar:

But on Safari, it is not:

As you can see, the blue circle is cut. Any idea how to make it cross browser?

Note: my actual navigation is dynamically generated so I don't know how many items are actually in the menu-bottom section.