如何消除display:flex导致的div间间隙且不破坏原有布局？

我在container与Pages这两个div之间始终存在间隙，移除CSS中的display:flex可消除间隙，但会导致video、overlay和content元素错位。如何在不破坏现有布局的前提下消除该间隙？

我尝试过调整margin为0、正负值，单独设置上下margin，不确定是否未应用到正确位置；还尝试过使用display:flex box、flex:1，均未解决问题。

现有代码 #

CSS代码 #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    width: 100vw;
    height: 100vh;
    background-color: #292626;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: transparent;
}
.container .content{
    opacity: 0.75;
    margin-bottom: -100px;
}

.overlay{
    position: absolute;
    height: 100vh;
    width: 100vw;
    background-color: black;
    opacity: 0.4;
    right: 0;
    bottom: 0;
    z-index: -1;
}

body{
    font-family: 'MontFont', sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0rem;
}

.Holmes1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Park1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.ContactME1{
    writing-mode: vertical-lr;
    font-size: 5em;
    font-weight: 950;
    color: #fff;
    text-align: center;
    mix-blend-mode:
    difference;
}
.Pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}
section{
    height: 100vh;
    display: flex;
    scroll-snap-align: start;
    margin-top: -4px;
}
.Holmespage{
    background-color: #373333;
}
.Parkpage{
    background-color: #292626;
}

HTML代码 #

<div class="container">
    <div class="overlay"></div>
    <div class="content">
      <h1>Test</h1>
    </div>
  </div>
  <div class="Pages">
    <section class="Holmespage">
        <div class="Holmes1">HOLMES</div>
    </section>
    <section class="Parkpage">
        <div class="Park1">PARK</div>
    </section>
    <section class="Contactpage">
        <div class="ContactME1">CONTACT</div>
    </section>
  </div>

解决方案 #

方法1：移除container的margin: auto #

将container的margin: auto;改为margin: 0;，margin: auto在flex容器中可能因浏览器渲染偏差产生垂直方向的多余间距。修改后container的CSS：

.container{
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

方法2：设置body为flex布局 #

给body添加flex布局，让container和Pages垂直排列并紧贴，同时保留各自布局特性：

body{
    font-family: 'MontFont', sans-serif;
    height: 100vh;
    width: 100vw;
    margin: 0rem;
    display: flex;
    flex-direction: column;
}
.container{
    /* 保留原有属性，移除margin:auto */
    margin: 0;
    flex: 0 0 100vh; /* 固定高度，不被压缩 */
}
.Pages{
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    flex: 1; /* 占据剩余空间 */
}

方法3：添加vertical-align属性 #

给container添加vertical-align: top;，消除块级flex容器的基线对齐间隙：

.container{
    /* 原有属性不变，新增 */
    vertical-align: top;
}

以上三种方法均能在保留container内部flex布局的前提下，消除与Pages之间的间隙，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者user25618867