White line between divs for some different mobile views

I created a minimal reproduceable example where I took out all styling except the background color and a height so it can be easily visible. Can anyone explain why there is a white line between the divs? It seems to be random based on the screen size. This issue is in chrome and Edge. I have not checked other browsers yet. I first thought it was an issue with Chromes mobile viewer but the same problem exists in Edge. Does anyone know what is causing this or how to resolve it? Here is the code. When you go to this link, you can switch between mobile views to see the issue as shown in the image below.

The cause of that white lines is the body of your HTML. Adding this global reset may help you get rid of that white lines.

* {
margin: 0;
padding: 0;
}

So the content of your CSS data may look like this.

* {
  margin: 0;
  padding: 0;
}
.main-bottom-div {
  min-height: 35vh;
  background-color: rgb(1, 65, 99);
}
.main-middle-div {
  height: 10vh;
  background-color: rgb(1, 65, 99);
}

Hope this could help you in some ways.

I never found out why this is happening but the only solution I have found is to simply put the background color in the parent div and add a percentage to each child div like below.

.main{
  position: relative;
  height: 100px;
  background: rgba(1, 65, 99, 0.99);
}
.main-bottom-div {
  height: 65%;
}
.main-middle-div {
  height: 45%;
}

<div className={"main"}>
  <div className={"main-middle-div"}>
    <div style={{ padding: "0px 20px" }}>test </div>
  </div>
  <div className={"main-bottom-div"}>
    <div>test</div>
  </div>
</div>