Горизонтально прокручиваемый div, содержащий вертикальный прокручиваемый div, не будет прокручиваться по горизонтали на iOS

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

/* MINIMAL RESET */
body, html {
  height: 100%;
  margin: 0;
  padding: 0;
}
* { box-sizing: border-box; }

<div style="
            overflow-x: scroll;
            white-space: nowrap;
            width: 100%;
            height: 100%;
            position: relative;
            background-color: black;
            ">
  <div style="
              width: 100%;
              height: 100%;
              left: 0%;
              top: 0px;
              margin: 0px;
              position: absolute;
              display: inline-block;
              background-color: green;
              ">
    <div style="
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                ">
      <div style="
                  width: 100%;
                  height: 200%;
                  ">
      </div>
    </div>
  </div>
  <div style="
              width: 100%;
              height: 100%;
              left: 100%;
              top: 0px;
              margin: 0px;
              position: absolute;
              display: inline-block;
              background-color: blue;
              ">
    <div style="
                width: 100%;
                height: 100%;
                overflow-y: scroll;
                ">
      <div style="
                  width: 100%;
                  height: 200%;
                  ">
      </div>
    </div>
  </div>
</div>

Ответ 1

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

Таким образом вы сможете сдвигать свои DIVs влево и вправо с помощью JS и прокручивать вверх и вниз с помощью обычной прокрутки.

Ответ 2

Вам нужно заменить все overflow-*AXIS* на простые overflow auto:

<div style="overflow: auto; white-space: nowrap; width: 100%; height: 100%; position: relative; background-color: black;">
     <div style="width: 100%; height: 100%; left: 0%; top: 0px; margin: 0px; position: absolute; display: inline-block; background-color: green;">
        <div style="width: 100%; height: 100%; overflow: auto;">
           <div style="width: 100%; height: 200%;"></div>
        </div>
     </div>
     <div style="width: 100%; height: 100%; left: 100%; top: 0px; margin: 0px; position: absolute; display: inline-block; background-color: blue;">
        <div style="width: 100%; height: 100%; overflow: auto;">
           <div style="width: 100%; height: 200%;"></div>
        </div>
     </div>
  </div>