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

App.tsx

import React, { useState } from 'react'
import './App.css'
import { Box, 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: false,
      id: Date.now()
    }
    if (todoText == '') return
    setTodos([...todos, todoBody])
    setTodoText('')
    console.log(todos)
  }

  const handleComplete = (id: number) => {
    const newTodo = todos.map(todo => {
      if (todo.id === id) {
        return ({ ...todo, completed: !todo.completed })
      }
      return todo
    })
    setTodos(newTodo)
  }

  const deleteTodo = (id: number) => {
    console.log(id)
    const newList = todos.filter(todo => todo.id !== id)
    setTodos(newList)
  }

  return (
    <Box>
      <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} deleteTodo={deleteTodo} handleComplete={handleComplete} />
        </div>
      </div>
    </Box>
  )
}

App.css

* {
  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%;
  display: flex;
  align-items: start;
  background: rgb(185, 185, 185);
}

TodoList.tsx

import { IListProps } from '../../types'
import { Box, Checkbox, Stack, Button, Typography } from '@mui/material'
import './todo.css'


export const TodoList:React.FC<IListProps> = ({todoArray, deleteTodo, handleComplete}) => {
  return (
    todoArray.length > 0 ?
      <Stack spacing={4} direction='column-reverse' sx={{ width: '100%', display: 'flex', alignItems: 'center' }}>
        {  
            todoArray.map(todo => {
                return (
                    <Box className= {todo.completed ? 'todoCompleted' : 'todoBody'}>
                        <Box>
                            <Typography>{todo.bodyText}</Typography>
                        </Box>
                        <Box>
                            <Checkbox checked = {todo.completed} onClick={() => handleComplete(todo.id)}/>
                            <Button onClick={() => deleteTodo(todo.id)} variant='outlined' color='error'>Удалить</Button>
                        </Box>
                    </Box>
                )
            })
        }
      </Stack>
                :
        <Box sx={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <Typography variant='h4'>
                Пусто
            </Typography>
        </Box>
  )
}

todo.css

.todoBody {
    width: 65%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 5px;
}

.todoCompleted {
    width: 65%;
    background-color: rgb(7, 179, 7);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-radius: 5px;
}