Estou procurando criar um visualizador composto por um número arbitrário de divs alinhados horizontalmente, onde apenas 3 são visíveis a qualquer moment

<div id="viewport">
    <div id="slides">
        <div>Content 1</div> <!-- not visible -->
        <div>Content 2</div> <!-- visible -->
        <div>Content 3</div> <!-- visible -->
        <div>Content 4</div> <!-- visible -->
        <div>Content 5</div> <!-- not visible -->
        <div>...</div> <!-- not visible -->
    </div>
</div>

Minha abordagem é ter um div pai ("viewport") de largura / altura e estouro fixos: oculto para deslizar seu div filho ("slides"), que tem o conteúdo real em seus divs filhos, para a esquerda ou para a esquerda. certo

Para que isso funcione, preciso que os divs filhos dos "slides" estejam todos alinhados horizontalmente com nenhum deles agrupado abaixo, o que acontecerá por padrão. Consigo fazer isso quando souber e especificar a largura cumulativa dos filhos da div "slides" em CSS, mas os adicionarei / removerei dinamicamente em JS. Gostaria de evitar a necessidade de alterar constantemente a largura da div "slides" no JS e preferir apenas descobrir como fazê-lo no CSS.

ntão, em resumo, como faço para impedir que uma série de divs seja agrupada abaixo se a largura total for desconhecid