Как предотвратить фиксированную сенсорную прокрутку блока div

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

Однако на мобильных устройствах контейнер div блокирует возможность прокрутки, есть ли способ решить эту проблему?

Вещи, которые я пробовал:

• pointer-event: none работает, но пользователь не сможет взаимодействовать ни с чем внутри фиксированного div.

• z-Index: не работает

• работает, если область прокрутки является окном, но мне нужно, чтобы это была внутренняя прокрутка

См. пример ниже в мобильном представлении (chrome devtool) и попробуйте прокрутить с помощью мыши "касание", заметили, если вы начинаете прокрутку из красной области, это не работает

.container {
  overflow: auto;
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
}

.content {
  height: 2500px;
  background: lightgray;
}

.btn-container {
  position: fixed;
  bottom: 100px;
  padding:64px;
  width: 100%;
  display: flex;
  justify-content: center;
  background: red;
}

<div class="container">
  
  <div class="content">
    
  </div>
  <div class="btn-container">
    <button>button</button>
  </div>
</div>