我明白你想要实现的效果：一个尺寸固定的可编辑div，文本从下往上排版，光标始终停留在左下角，同时容器不会因为内容过多而自动扩容。下面是具体的解决方案：

核心实现思路 #

我们可以通过Flex布局的反向排列来实现内容从下到上堆叠，配合overflow: auto处理内容溢出，再通过一些样式调整确保光标位置正确，同时固定容器尺寸。

完整代码示例 #

<div class="bottom-up-editor" contenteditable="true"></div>

.bottom-up-editor {
  /* 固定宽高，可根据需求调整数值 */
  width: 300px;
  height: 200px;
  /* 盒模型确保padding不会额外增加容器尺寸 */
  box-sizing: border-box;
  /* 开启flex布局，反向列排列实现从下到上排版 */
  display: flex;
  flex-direction: column-reverse;
  /* 内容溢出时显示垂直滚动条，避免容器被撑大 */
  overflow-y: auto;
  /* 内边距让光标不会紧贴容器边缘 */
  padding: 8px;
  /* 基础样式美化 */
  border: 1px solid #ccc;
  outline: none;
  /* 保持相对定位，确保滚动和光标行为正常 */
  position: relative;
  /* 文本左对齐，确保光标在左下角 */
  text-align: left;
  line-height: 1.5;
}

/* 修复空容器时光标位置异常的问题 */
.bottom-up-editor:empty::before {
  content: "\200B"; /* 插入零宽空格，确保空状态下光标能稳定显示在左下角 */
}

关键样式解释 #

• flex-direction: column-reverse：让容器内的内容从底部开始排列，新输入的文本会自动添加在视觉上的底部区域，完美实现从下到上的排版逻辑。
• overflow-y: auto：当内容高度超过容器固定高度时，自动触发垂直滚动条，容器宽高始终保持设定值，不会出现扩容问题。
• position: relative：保留容器的定位上下文，配合flex布局既不会导致容器尺寸变化，又能保证光标定位的稳定性。
• :empty::before：通过零宽空格解决空容器时光标偏移或不显示的问题，确保编辑状态的连贯性。

测试验证 #

你可以直接在这个div中输入内容，当内容超过容器高度时，会自动出现滚动条，容器尺寸保持固定，光标始终停留在左下角的输入位置，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Harry