Абсолютное позиционирование элементов в прокручиваемом элементе div

Question

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

т.е. У меня есть div шириной 400px, и если я установлю позицию дочернего div влево: 500px, я бы хотел, чтобы он был вне экрана с горизонтальной полосой прокрутки на div.

Я создал два примера здесь

т.е. В примере 1 второй красный div должен быть наполовину обрезан с помощью горизонтальной полосы прокрутки, как в примере 2, за исключением того, что он выталкивается из-за того, что он не совсем расположен.

Надеюсь, это имеет смысл.

Answer 1

В примере 1 установите положение: относительно div # main.

Вам просто нужно отсортировать верхний и левый поля по элементам div, чтобы компенсировать их несоответствие основному телу (уменьшить их на 11 пикселей или около того)