width: auto;

Oi, Felipe, tudo bem?

Vamos lá, o width: auto : A largura inicial de um elemento no nível do bloco, como div ou p, é automática. Isso faz com que ele se expanda para ocupar todo o espaço horizontal disponível dentro de seu bloco de contenção. Se houver preenchimento ou borda horizontal, as larguras dessas não serão adicionadas à largura total do elemento.

Já com width: 100%: a largura total do elemento será 100% do seu bloco contendo mais qualquer margem horizontal, preenchimento e borda (a menos que você tenha usado o tamanho da caixa: border-box, nesse caso somente margens são adicionadas aos 100% para alterar como a largura total é calculada).

Aqui, nessa imagem, que achei define perfeitamente a diferença visualmente:

https://www.456bereastreet.com/lab/width-auto/

Qualquer dúvida é só falar :}}