Я рассчитываю создать средство просмотра, состоящее из произвольного числа горизонтально выровненных div, где только 3 видны в любой момент времени.

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

Мой подход заключается в том, чтобы иметь родительский div ("viewport") фиксированной ширины / высоты и переполнения: скрытый, чтобы затем сдвинуть его дочерний div ("слайды"), который имеет фактическое содержимое в своих дочерних div, влево или вправо ,

Чтобы это работало, мне нужно, чтобы все дочерние элементы «слайдов» были выровнены по горизонтали, и ни один из них не был перенесен ниже, что произойдет по умолчанию. Я успешно справляюсь с этим, когда знаю и указываю совокупную ширину дочерних элементов div «слайды» в CSS, но я буду динамически добавлять / удалять их в JS. Я хотел бы избежать необходимости постоянно менять ширину div «слайдов» через JS, а лучше просто узнать, как это сделать в CSS.

Итак, вкратце, как я могу предотвратить наложение ряда элементов div, если общая ширина неизвестна?