保持一个绝对定位的 HTML 元素在它的位置

跨度标签red arrow具有position: absolute在右下角的预期。当我开始在content容器中输入文本时，箭头开始飘走。

将content高度设置为auto或100%没有解决问题。

red arrow无论content元素的高度如何，我们如何保持 span 标签固定在右下角？

https://codesandbox.io/s/gracious-shockley-dcp59?file=/src/App.js

HTML

<div className="App">
      <div className="container">
        <div className="content">
          <div suppressContentEditableWarning={true} contentEditable="true">
            Test
          </div>
        </div>
        <span className="helper"></span>
      </div>

      <div className="container">
        <div className="content">
          <div suppressContentEditableWarning={true} contentEditable="true">
            <p>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </p>
          </div>
        </div>
        <span className="helper"></span>
      </div>
    </div>

样式文件

.container {
  overflow: auto;
  border: 1px solid #000;
  width: 150px;
  height: 100px;
  float: left;
  transform: translate(0px, 10px);
  margin-right: 20px;
}

.content {
  padding: 15px;
  background-color: #ddd;
}

.helper::before {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 4px solid red;
  border-bottom: 4px solid red;
}