javascript - 元素不固定

Question

我遇到了一个常见的问题，如果使用灰色三角形本身（resize-icon）操纵fixed的大小，那么bottom到rightdiv input-area的元素（resize-icon）最终会“移动”出位置。
有没有黑客，甚至修复这个？
显然，我可以编写一些JS来解决这个问题，但我希望它只使用HTML和或CSS就可以被破解/修复。
重现问题的步骤：
选择蓝色文本区域。
按enter键多次，使文本区域展开。
通过灰色三角形手动调整窗口大小。
再按一下回车键。
Here is a codepen.

const resizeIcon = document.getElementById('resize-icon'),
      inputArea  = document.getElementById('input-area')
let   cursorX,
      cursorY,
      inputW,
      inputH

resizeIcon.onmousedown = function(e){
  document.addEventListener('mousemove', calculate)
  cursorX = e.clientX
  cursorY = e.clientY
  inputW  = inputArea.offsetWidth
  inputH  = inputArea.offsetHeight
}

const calculate = (e) => {
  xDifference = (e.clientX - cursorX) * 2 // if text box is centered
  yDifference = e.clientY - cursorY
  resize(xDifference, yDifference)
}

const resize = (x, y) => {
  width  = inputW + x + 'px'
  height = inputH + y + 'px'
  inputArea.style.width  = width
  inputArea.style.height = height
}

document.onmouseup = function(){
  document.removeEventListener('mousemove', calculate)
}

body {
  margin: 0;
}

#input-area {
  width: 20vw;
  max-width: 90vw;
  min-width: 10vw;
  height: auto; /* was 20vh which caused even more problems */
  min-height: 20vh;
  position: absolute;
  top: 1%;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
  box-sizing: border-box;
  background: #f2f2f2;

  border:solid red 1px; /**/
}

#user-input {
  width: 100%;
  height: auto;
  padding: 10px;
  font-family: arial;
  white-space: pre-wrap;
  font-size: 24px;
  box-sizing: border-box;

  border:solid blue 1px; /**/
}

#user-input:focus {
  outline: none;
}

#resize-icon {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  transform: rotate(45deg) translate(50%, 50%);
  transform-origin: 100% 100%;
  background: #ccc;
}

<div id="input-area">
  <div id="user-input" contenteditable="true"></div>
  <div id="resize-icon"></div>
</div>

关于正在发生的事情的解释：
所以，在做了一些手脚之后，我相信我明白到底发生了什么。当您在利用了 input-area属性（例如，多次按enter键）之后手动调整 height: auto的大小时， user-input仍然大于 input-area，即使 input-area和 user-input由于它们的 height: auto属性而同时增大大小，这种差异仍然存在。换言之，在手动调整 input-area的大小，然后再次利用两个元素的 height: auto属性之后，两个元素之间的实际高度差异仍然存在，并且相对于用户手动确定的 resize-icon的新高度， fixed已变为 input-area的位置。这里需要注意的是，一旦您手动调整 input-area的大小，然后利用它及其子对象的 height: auto属性，彼此之间的高度差将持续存在（即1:3、2:4、3:5、4:6…）。
半生不熟的溶液
我仍然有兴趣了解任何纯HTML和CSS的解决方法。一个解决方案是为 overflow-y: scroll设置 width: calc(100% + sizeOfScrollBar)和 user-input，但这不是一个好的解决方案，因为我相信不同浏览器的滚动条宽度是不同的。

Answer 1

这可以通过css和html来实现。
1）确保父div不position: relative
2）添加使用此css：

    `position: fixed; bottom: 0; height: 40px; background: #fa0;`