Прокрутка листает ниже чем надо overflow: auto?

Question

Igorr2121212 @Igorr2121212

HTML
CSS

Прокрутка листает ниже чем надо overflow: auto?

Всем вечер добрый или утро но не суть. Я начинающий верстальщик и вот столкнулся с такой сегодня проблемой. Указывал overflow: auto для создании прокрутки, и вот я её добавил на сайт но она листает ниже чем надо, тоесть я листаю пролистывается весь материал, а дальше просто картинка фона, я думаю проблема в картинке фоновой что делать?
Вот код:
html:

<!DOCTYPE html> 
<html lang="en">
<head>
<body>
  <meta charset="utf-8">
  <meta name="viewport" content="width=100" content="height=120">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>ServiceAuto</title>
  <link href="./style.css" rel="stylesheet" type="text/css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans&family=Roboto:wght@900&display=swap" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Open+Sans&family=Roboto:wght@900&display=swap');
</style>
</head>
</body>

<body>

<main class="phan">
  <section class="cat">
    <div class="ca1">

    </div>
  </section>
</main>
</body>


<body>
<main class="phone">
  <section class="phones">
    <div class="content">
      <span class="text">
        ServiceAuto
      </span>
    </div>
      <div class="cluch">
    <img src="imd/Ключ.png" alt="" class="clucha">
      </div>
    <div class="textt">
    Самое лучшее сервисное обслуживание ваших автомобилей только у нас! У нас всегда дешевые цены и качественный ремонт. Вам всегда рады и вам всегда помогут. Так же у нас есть качественные детали на ваш  автомобиль. Так же у нас вы можете заказать любую деталь на ваш автомобиль. У нас всегда детали в Наличии. Так же у нас работает эвакуатор и он вас может отбуксировать до нашего СТО. И всё это за пол цены. Не упустите свой шанс!
    </div>
      <div class="car">
        <img src="imd/car.png" alt="" class="cars">
      </div>
    <div class="skidka">
      <big>Успей пока есть возможность!</big>
    </div>
      <div class="двигательa">
        <img src="imd/sss.png" alt="" class="двигатель">
      </div>
      <div class="цена">
        <img src="imd/Цена.png" alt="" class="costs">
      </div>
      <div class="Аккамулятор">
        <img src="imd/Аккамулятор.png" alt="" class="Ак">
      </div>
      <div class="цена1">
        <img src="imd/цуна1.png" alt="" class="цуна1">
      </div>
      <div class="турбинаф">
        <img src="imd/турбина.png" alt="" class="турбина">
      </div>
      <div class="wfs">
        <img src="imd/WIFI.png" alt="" class="wf">
      </div>
      <div class="мехф">
        <img src="imd/Механики.png" alt="" class="мех">
      </div>
      <div class="надпись">
       <big>Почему именно мы?</big>
      </div>
      <div class="иконка">
        <img src="imd/i.png" alt="" class="иконк">
      </div>
      <div class="никифор">
        Качественный ремонт
      </div>
      <div class="турбинафф">
        <img src="imd/скидка.png" alt="" class="скидка">
      </div>
      <div class="скид">
        Скидка до 50%
      </div>
      <div class="дружба">
        <img src="imd/друж.png" alt="" class="друг">
      </div>
      <div class="выручим">
        Всегда выручим!
      </div>
    </div>
  </section>
</main>
</body>
</head>
</html>

CSS

body {
	margin: 0;
	padding: 0;
	color: #00ff0e;
	font-family: 'Anton', sans-serif;
	font-family: 'Open Sans', sans-serif;
	font-family: 'Roboto', sans-serif;
	font-family: "color", sans-serif;
	font-size: 15px;
	line-height: 1.2;
	font-weight: normal;
}

.phone{
	overflow: auto;
}

.phones{
	min-height: 100vh;
	min-width: 100%;
	background: url(imd/Phone.png) center no-repeat;
	background-size: 80% 130%;
	margin: 0;
	padding: 0;
	width: 30%;
	height: 50%;
	position: fixed;
	display: flex;
	display: grid;
	overflow: auto;
}

Фоновая картинка в классе phones