Div heights not working using Flexbox in Safari

Question

Good evening everyone,

I'm having trouble with Flexbox in the safari browser displaying attributes correctly in accordance with my CSS. Disclaimer I'm using SASS to compile my CSS but I don't think that's the issue.

Here is my problem: Safari is showing the yellow box, denoting the 'active' link, around the text and not expanding to the boundaries of the div

As you can see the yellow background does not sit flush with the purple nav bar when viewed in Safari. I didn't know this until I deployed my app to Heroku and looked at the website on my iPhone 6 because the device toolbar in Chrome lied to me:

I've tried using prefixes and changing the way I declare the flex property from flex: 1 to flex: 1 1 auto which is better accepted by Safari I've read. Interestingly I was able to 'close the gap' by increasing the padding (top and bottom) of the yellow box which has a class name of .active.

Here is my nav.scss file:

#navigation{
  flex: 1;
  display: flex;
  background: #9b59b6;
  flex-direction: row;
  align-items: center;
  overflow: hidden; /* hide excess div height from padding */

    div {
          display: flex;
          flex: 1;
          height: 100%;
          width: 100%;
        }
    /* receive .active if the link is clicked */
        .active{
          background: yellow;
          padding: 7% 0; /* ensure padding always extends beyond border of #navigation */
        }

        a {
          display: flex;
          flex: 1;
          height: 100%; /* height to fill the div so text doesn't have to be clicked exclusively */
          font-size: 4vh;
          margin: 0 auto;
          font-family: 'Athiti', serif;
          color: black;
          text-align: center;
          align-items: center;
          justify-content: center;
          text-decoration: none;}

The comments explain what is going on here, and I should be happy I solved my issue but I would like to learn from the wise sages on StackOverflow what the "right" way of solving this problem is. I appreciate you taking the time to look at this and will be lurking in the comments.

Cheers!