CSS - Положение родителя с абсолютным переполнением при возможности прокрутки

Question

Я пытаюсь загрузить несколько разделов с горизонтальной прокруткой. Каждый div позиционируется абсолютным образом (красный прямоугольник в моем примере), поэтому он виден за пределами прокручиваемого контейнера. У меня есть пример, который работает хорошо, но, похоже, я потерял возможность прокрутки. Полоса прокрутки появляется, но при ее прокрутке блоки div не перемещаются.

Добавляя позицию относительно всего контейнера, я могу заставить div прокручиваться, но они не отображаются за пределами контейнера.

Пожалуйста, помогите мне показать содержимое вне контейнера, но сохранить возможность прокрутки.

    <div style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px; position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>
    </div>

Answer 1

Я немного отредактировал ваш фрагмент кода и добавил класс в черный контейнер, чтобы легко стилизовать его прямые дочерние элементы следующим образом:

.container > div {
  border: 1px solid green;
}

.container > div {
  border: 1px solid green;
}

<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px; position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>

    <div style="display:inline-block; margin-left:50px; width:500px; height:40px">
        <div style="border:1px solid black; height:40px; width:500px;  position:absolute">
            <div style="position:absolute; height:100px;width:500px; background:Red; top:5px; left:5px"></div>
        </div>
    </div>
    </div>

Теперь вы должны увидеть, что прокрутка действительно работает, но только для зеленых div. Другие элементы (блоки с черной рамкой и блоки с красной рамкой) не прокручиваются, потому что у них есть position: absolute;. Это означает, что они удаляются из потока документов и, поскольку ни один другой элемент не имеет position: relative, они абсолютны относительно тела. Вот почему, если вы прокручиваете с помощью основной полосы прокрутки, они действительно будут прокручиваться.

Вы можете добавить position: relative; в контейнер, но при этом, как вы сказали, элементы не будут переполнять контейнер.

Насколько я знаю, нет способа решить эту проблему с помощью всего css, и вам, вероятно, придется заставить их прокручивать некоторые Javascript.

Очень простой пример c:

const container = document.querySelector('.container');
const boxes = document.querySelectorAll('.box');

container.addEventListener('scroll', (e) => {
  let offset = e.target.scrollLeft;
  for(let box of boxes) {
    box.style.transform = `translateX(${offset}px)`;
  }
});

.container > div {
  border: 1px solid green;
}

.fake-width {
  width: 2000px;
}

.boxes {
  display: flex;
}
.box {
  background: blue;
}

.box + .box {
  margin-left: 50px;
}

<div class="container" style="overflow-x:scroll; height:40px; white-space: nowrap; background:black;">
  <div class="fake-width"></div>

</div>

<div class="boxes">
<div class="box box-1" style="display:inline-block; margin-left:50px; width:500px; height:40px">
</div>

<div class="box box-2" style="display:inline-block; margin-left:50px; width:500px; height:40px">
  </div>
  
  <div class="box box-3" style="display:inline-block; margin-left:50px; width:500px; height:40px">

  
</div>
</div>

</div>

Как вы могли заметить, если вы go используете этот маршрут, вам даже не нужно хранить div внутри контейнера прокрутки. Можно, в зависимости от того, что именно вы собираетесь построить, но в этом нет необходимости.