Evite que los divs flotantes caigan a la siguiente línea

Estoy buscando crear un visor compuesto por un número arbitrario de divs alineados horizontalmente donde solo 3 son visibles en un momento dado.

<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>

Mi enfoque es tener un div primario ("viewport") de ancho / alto fijo y desbordamiento: oculto para deslizar su div secundario ("slides"), que tiene el contenido real en sus div secundarios, a la izquierda o al Derecha

Para que esto funcione, necesito que las divisiones secundarias de "diapositivas" estén alineadas horizontalmente sin que ninguna de ellas se ajuste a continuación, lo que sucederá de manera predeterminada. Tengo éxito en hacer esto cuando sé y especifico el ancho acumulativo de los elementos secundarios del div "diapositivas" en CSS, pero los agregaré / eliminaré dinámicamente en JS. Me gustaría evitar tener que cambiar constantemente el ancho de la división de "diapositivas" a través de JS y preferiría simplemente descubrir cómo hacerlo en CSS.

n resumen, ¿cómo puedo evitar que una serie de divs se ajuste a continuación si se desconoce el ancho total?