Почему когда объекты заполняют место и появляется скролл то ниже background не имеет заданого цвета?

import React, { useState } from 'react'
import './App.css'
import { Button, TextField } from '@mui/material'
import { Itodo } from './assets/types'
import { TodoList } from './assets/parts/todoList/TodoList'

export const App = () => {

  const [todoText, setTodoText] = useState<string>('')

  const [todos, setTodos] = useState<Itodo[]>([])

  const addTodo = async () => {
    const todoBody:Itodo = {
      bodyText: todoText,
      completed: true,
      id: Date.now()
    }
    if(todoText == '') return
    setTodos([...todos, todoBody])
    setTodoText('')
    console.log(todos)
  }



  return (
    <div className='background'>
      <div className='head'>
        <TextField value={todoText} onChange={event => setTodoText(event.target.value)} id="standard-basic" label="Введите текст" variant="standard" InputLabelProps={{ sx: {fontSize: '18px'} }} sx={{width: '40%'}}/>
        <Button variant="contained" color="success" size='large' sx={{ marginLeft: '10px' }} onClick={addTodo}>
          Добавить
        </Button>
      </div>
      <div className='body'>
        <TodoList todoArray={todos}/>
      </div>
    </div>
  )
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.background {
  width: 100vw;
  height: 100vh;
  background: rgb(185, 185, 185);
}

.head {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  justify-content: center;
}