The DIV box get cut off at the beginning of the page

Question

The DIV box I created is cut off at the beginning. I defined the height to auto, so the page can scroll in the mobile version and the width to 85vw, but the image at the top of the page is getting cut off.

I define the height and width, but it doesn't work. Moreover, I centered the box at the beginning with position: absolute and transform property, but then changed it to display: flex as it was suggested on the Internet, but still nothing. Adding margins also didn't work.

Here is part of the code:

body {
  background-color:  hsl(233, 47%, 7%);
  padding: 0;
  margin: 0;
  font-family: 'Lexend Deca', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
 }

.main-container {
  width: 85vw;
  height: auto;
  background-color: hsl(244, 38%, 16%);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

Answer 1

If you give a div height: auto, it stretches vertically to fill its contents, no more. If you want the div to be 100% of the height of the body, you have to first give the html and body tags 100% height.I set it at 80%, but you can also use px or vh (e.g. 300px, 85vh).

html, body
{
 height: 100%;
}

body {
  background-color:  darkseagreen;
  padding: 0;
  margin: 0;
  font-family: 'Lexend Deca', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
 }

.main-container {
  width: 85vw;
  height: 80%;
  background-color: red;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
}

<div class="main-container">This is text</div>