Как прокрутить родительский контейнер при перетаскивании внутри дочернего ввода в Chrome?

Question

У меня есть контейнер, в котором установлено overflow: auto. Внутри контейнера у меня есть вход, который длиннее родительской ширины, вызывая переполнение. Находясь в Chrome, если я нажму и перетащу внутрь ввода, то ничего не произойдет. В Firefox это выглядит для прокрутки родительского контейнера.

Есть ли способ прокрутки родительского контейнера при выделении и перетаскивании текста ввода в Chrome?

div {
  width: 100px;
  overflow: auto;
  border: 1px solid red;
  padding: 2px;
}

input {
  border: 1px solid green;
}

p {
  white-space: nowrap
}

<p>Doesn't work in Chrome (works in Firefox)</p>
<div>
  <input type="text">
</div>

<p>Works in Chrome and Firefox</p>
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sapiente minima magni eos, molestias ab, quam officiis consectetur minus dolor iste maxime, eligendi cupiditate aut! Perspiciatis, a nesciunt facilis debitis?
  </p>
</div>

Тег p в примере служит просто для демонстрации того, что я могу прокручивать родительский элемент при выделении текста, но не могу прокручивать с помощью inputтег.

Answer 1

Вы можете сделать это с помощью JavaScript, сделав input width таким же, как scrollWidth

var div = document.getElementsByTagName('div');
var input = document.getElementsByTagName('input');
input[0].style.width = input[0].scrollWidth+'px';

var div = document.getElementsByTagName('div');
var input = document.getElementsByTagName('input');
input[0].addEventListener("keydown", function(){
  input[0].style.width = input[0].scrollWidth+'px';
  input[0].style.minWidth = div[0].style.width+'px';
});

div {
  width: 100px;
  overflow: auto;
  border: 1px solid red;
  padding: 2px;  
}


input {   
  border: 1px solid green;
  
}

p {
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Doesn't work in Chrome (works in Firefox)</p>
<div>
  <input type="text">
</div>

<p>Works in Chrome and Firefox</p>
<div>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat sapiente minima magni eos, molestias ab, quam officiis consectetur minus dolor iste maxime, eligendi cupiditate aut! Perspiciatis, a nesciunt facilis debitis?
  </p>
</div>