在移动Chrome上调整窗口大小时，Flexbox中的奇怪行为

Question

Flexbox在移动浏览器上发生了一个非常奇怪的行为。

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

这只是发生在移动浏览器，我目前使用谷歌的手机像素Chrome移动。我有一个调整大小脚本运行调整大小的页面上的多个元素作为一种解决方法不能够正确使用100vh像这样：

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"; 
     } 
    }; 

如GIF看出，在所进行的项目是在Flex项目容器。当我向上滚动以隐藏导航栏时，会发生此行为，然后单击其中一个弹性链接。

我正在使用Vuejs，并且正在通过检查支柱更改来填充下面的内容。 Flex链接将字符串传递到将项目视图更改为所选项目的功能。

我也有一个脚本来添加一个类，在选定的链接上更改背景颜色，并在所有其他链接上删除该类，这就是我如何更改活动链接背景。

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"; 
    } 
}); 

这里是我的SASS文件的相关部分：

#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; 
     } 
    } 
    } 
} 

下面是相关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> 

我希望有人会知道是怎么回事，因为我真的没有看到这种情况发生的原因。

Answer 1

随着信贷基金的帮助非常，我能找到完美的作品，同时仍保持该元素的预期风格的解决方案。

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

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

我仍然觉得最初的问题是某种错误，但这至少是一种解决方法。

Answer 2

试试这个：

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