Strange behavior in a flexbox when resizing window on mobile chrome

Question

There is a very strange behavior with flexbox happening on a mobile browser.

Please see this gif for a visual of what's happening

This only happens on a mobile browser, I'm currently using Chrome mobile on a Google Pixel phone. I have a resize script running that resizes multiple elements on the page as a workaround for not being able to properly utilize 100vh like so:

window.onresize = function() {
        document.getElementById("backgroundImage").style.height = window.innerHeight;
        document.getElementById("mainScreen").style.height = window.innerHeight;
        if (window.innerWidth > 750) {
          document.getElementById("scrollContent").style.height = window.innerHeight - "96";
        } else {
          document.getElementById("scrollContent").style.height = window.innerHeight - "72";
        }
    };

The items that are being effected as seen in the gif are items in a flex container. This behavior happens when I scroll up to hide the navigation bar, then click one of the flex links.

I'm using Vuejs, and the content below is being populated by checking for a prop change. The flex links pass a string into a function that changes the project view to the selected project.

I also have a script to add a class that changes the background color on the selected link, and remove that class on all other links, which is how I am changing the active link background.

var webComp = Vue.component('design-comp', {
  template: "#webComp",
  props:['trans-state'],
  components: {
      'project-comp': projectComp,
  },
  data: function() {
    return {
      activeProj: 'default',
    }
  },
  methods: {
    changeProj: function(proj) {
      this.activeProj = proj;
      var a = document.getElementsByClassName('projClick');
      for (i=0; i<a.length; i++) {
        a[i].classList.remove('projActive');
      }
      event.currentTarget.classList.add('projActive');
      document.getElementById('webContainer').scrollTop = 0;
    }
  },
  created: function() {
    this.activeProj = "default";
  }
});

Here is the relevant portion of my SASS file:

#webContainer {
  margin-top: 50px;
  height: calc(100% - 50px);
  .projHeader {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background-color: $headerColor;
    box-sizing: border-box;

    .projClick {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      height: 50px;
      box-sizing: border-box;
      background-color: $contentColor;
      border-right: 2px solid $headerColor;
      border-left: 2px solid $headerColor;
      border-bottom: 4px solid $headerColor;
      border-top: 4px solid $headerColor;
      flex-basis: 50px;
      transition: background-color 0.3s;

      &.projActive {
        background-color: $linkActiveColor;
      }

      p {
        color: $fontColor;
        font-family: $titleFont;
        font-size: 2em;
      }
    }
  }
}

Here is the relevant HTML:

<div class="viewContainer" id="webContainer">
        <div class="transitionBox"></div>
        <div class="stickyImageBottomLeft"><img src="./img/AfricaMountainPixelR.gif" /></div>
        <div class="stickyImageBottomRight"><img src="./img/AfricaMountainPixel.gif" /></div>
        <div class="projHeader">
            <div class="projClick projActive" v-on:click="changeProj('default')">
                <p>0</p>
            </div>
            <div class="projClick" v-on:click="changeProj('kyount')">
                <p>1</p>
            </div>
            <div class="projClick" v-on:click="changeProj('prodigal')">
                <p>2</p>
            </div>
            <div class="projClick" v-on:click="changeProj('joy')">
                <p>3</p>
            </div>
            <div class="projClick" v-on:click="changeProj('cgl')">
                <p>4</p>
            </div>
            <div class="projClick" v-on:click="changeProj('mikeg')">
                <p>5</p>
            </div>
            <div class="projClick" v-on:click="changeProj('reddit')">
                <p>6</p>
            </div>
            <div class="projClick" v-on:click="changeProj('westbeach')">
                <p>7</p>
            </div>
        </div>
        <div class="contentContainer">
        Project Page is loaded here
        </div>
</div>

I'm hoping someone might know what is going on because I really don't see a reason for this to be happening.

Answer 1

Try this:

#webContainer {
  margin: 0;
  padding-top: 50px;
  height: 100%;
  box-sizing: border-box; /* if you didn't apply it before */
...

Answer 2

With the help of Kosh Very, I was able to find a solution that works perfectly while still keeping the intended style of the element.

#webContainer {
  margin-top: 50px;
  box-sizing: border-box;
  position: relative;
  height: 100%;

    .projHeader {
        ...
        position: fixed;
        ...
    }
}

I still feel like the initial problem is a bug of some sort, but this is at least a workaround.