Проблема изменения размера элемента, это фиксированная позиция справа

Question

У меня есть div, который начинается в фиксированной позиции справа от окна, но его можно перетаскивать (используя javascript) и изменять его размер (с помощью css). Проблема заключается в том, что если размер div будет изменен первым (путем захвата нижнего правого угла), он не будет изменен должным образом. Он сохранит свое фиксированное положение справа, а затем будет расти или уменьшаться с левой стороны. Однако, если div перетаскивается первым, изменение размера будет работать, как и ожидалось. Вот текущие css-свойства div:

#resize {
  position: fixed;
  right: 30px;
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

Демо-версия:

https://jsfiddle.net/mravdo52/2/

Я пробовал различные обходные пути. Так как кажется, что перемещение div заставляет resize работать должным образом, я попытался просто сдвинуть div на пиксель после загрузки элемента, но это не работает, потому что я думаю, что есть проблемы синхронизации между загрузкой элемент, выполнение JavaScript и загрузка CSS. Впоследствии я попытался использовать jQuery promise() и queue(), чтобы сначала применить CSS, а затем переместить элемент, но это тоже не работает. Я также пытался использовать пользовательский интерфейс jQuery resizable(), но, похоже, это совсем не меняет размер. На данный момент у меня нет идей, и я был бы признателен за любую помощь.

Answer 1

Решение только для CSS: Вам просто нужно дать left изначально фиксированному div.

Объяснение решения: Причина, по которой он работал после перетаскивания элемента, потому что он применял левую позицию, поэтому мы можем задать левую позицию перед перетаскиванием элемента, и он будет работать!

Сначала попытался дать left: auto/initial/inherit, но не сработало. Таким образом, вы можете дать что-то вроде этого: left: calc (100% - 120px);

(120px представляет сумму правого положения 30px и ширины div 90px)

#resize {
  position: fixed;
  right: 30px;
  left: calc(100% - 120px);
  height: 90px;
  width: 90px;
  background-color: blue;
  resize: both;
  overflow: auto;
}

Обновленная скрипка: https://jsfiddle.net/mravdo52/6/