Прокручивать изображение в контейнере, который динамически изменяется с окном?

Question

У меня широкоформатное изображение, которое шире, чем в обычном окне браузера. Я хотел бы поместить его в прокручиваемый DIV (или другой контейнер), который прокручивается независимо от прокрутки в главном окне.

Я близко подошел к этой скрипке .

body {
  padding: 20px;
  font-family: Helvetica;
}

.scroll_box {
  background-color: #586;
  color: #000;
  overflow-x: scroll;
  /* this almost works but breaks the 
         layout of the parent elements. */
  right: 0;
  left: 0;
  position: absolute;
}

.scrollable_img {}

<table class="wrapper" border=1>
  <tr>
    <td>
      <div class="scroll_box">
        <img class="scrollable_img" src="" width=2048 height=16\>
      </div>
    </td>
  </tr>
</table>

Но, как вы можете видеть, компоновка прокручиваемого контейнера установлена ​​в абсолютное значение, что нарушает компоновку таблицы, в которой он содержится. Кроме того, заполнение тела страницы игнорируется.

Итак, как мне этого добиться, пока ..

1. Сохранение относительности макет так, чтобы все родители были правильного размера, а тело дополнялось.
2. Во избежание javascript, это должно быть встроено в систему вики, которая не позволяет javascript.
3. Динамическое изменение размера прокручиваемого контейнера до размера окна.
4. Если возможно, решение должно иметь возможность работать с изображениями неизвестного размера.

Большое спасибо всем, кто может это выяснить!

Answer 1

Если я правильно понял, добавив в таблицу обертку со следующими стилями

position: relative;
width: 100%;

выполнит работу, я отредактировал вашу скрипку здесь

РЕДАКТИРОВАТЬ : лучшую попытку можно найти здесь . Дополнительные действия:

1. Удалено position: absolute из .scroll_box

2. В элемент таблицы добавлены следующие правила:

   table-layout: fixed; width: 100%;

3. Удалена ранее добавленная оболочка и ее стиль, поскольку она не нужна после вышеуказанных изменений, как кажется.