Задачка по HTML/CSS со сложностью Nightmare⁠⁠

Если вам не нравится соискатель на собеседовании и его нужно гарантированно завалить, дайте ему следующее задание:

Дано:

<div style="overflow-x:scroll;">

<div style="position: relative; width:3000px; height:100px; background:green; ">

<div style="position:absolute; width:200px; height:200px; background:red; top:10px; left:10px "></div>

</div>

</div>

Требуется: понять какого лешего тут появляется вертикальная прокрутка?

Нужно сделать как на картинке ниже (горизонтальная прокрутка должна остаться, красный блок поверх всего, красный скролится горизонтально вместе с зеленым):

И без javascript =)

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