Thales , sou iniciante tambem, mas acho que foi a forma como ele fez, olha no seu projeto se você observou estes detalhes:

*no arquivo index.html *a parte que vai se adaptando enquanto os novos itens vão sendo inseridos é esta:

<div class="todo-list">
      <h1 class="title">
        Ceep
      </h1>

      <form class="form" action="">
        <input class="form-input" type="text" data-form-input>
        <button class="form-button" data-form-button> Novo Item </button>
      </form>

      <ul class="list" data-list>

      </ul>
    </div>

ele criou uma divisao e colocou dentro dela, um formulário pra inserir as tarefas e uma lista

• de itens sem linhas dentro, estas linhas serão inseridas aos poucos e isto está detalhado no arquivo listaDeTarefas

  No arquivo listaDeTarefas.js ele relacionou este item li com esta lista de itens do index.html , dá uma olhada nos detalhes que tem pra ver se está similar ao da aula , o pedaço principal da parte de inserir elementos está aqui:

  ( () => {
  
  const criarTarefa = (evento) => {   
  
  evento.preventDefault()
  
  const lista = document.querySelector('[data-list]')
  const input = document.querySelector('[data-form-input]')
  const valor = input.value
  
  const tarefa = document.createElement('li')
  tarefa.classList.add('task')
  const conteudo = `<p class="content">${valor}</p>`
  
  tarefa.innerHTML = conteudo
  
  tarefa.appendChild(BotaoConclui())
  lista.appendChild(tarefa)
  input.value = " "
  
  }
  
  const novaTarefa = document.querySelector('[data-form-button]')
  
  novaTarefa.addEventListener( 'click' , criarTarefa)

  e no css este pedaço que se adapta aos itens inseridos está assim:

  .todo-list {
    background-color: #0B2027;
    font-family: "Space Mono", monospace;
    padding: 1rem;
    min-width: 400px;
    min-height: 300px;
  }

  ele colocou o tamanho e altura minimos pra começar a lista, não colocou tamanho fixo

Olá, tudo bem?

Então, eu coloquei o min-height e funcionou.

Obrigado!

Que bom!!!