Html 防止下方长出的Div向上推上方Div

我遇到了一个问题，一个

从下面往上推另一个

基本上，上面的

是定义维度的

，下面是包含

元素的

。触发事件后，我将使用

innerHTML

更改

元素的内容。因此，

元素的内容从一行变为两行。但是，当发生这种情况时，

会被推上页面

我尝试过使用不同的

position

CSS值，但因为我使用的是flexbox，这意味着两个div叠加在一起

以下是CSS和HTML：

.container{
填充：10px；
高度：500px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
.玩家{
边缘底部：20px；
}
.textContainer{
字体大小：24px；
文本对齐：居中；
}

移动：0

画布向上移动，因为容器具有

justify content:center

。这意味着当段落在高度上展开时，画布必须向上移动，以便线条保持居中。不清楚你想发生什么。你想把画布固定在屏幕上吗？你能展示一个工作画面吗fiddle@Michael_B哦，对了，我忘了。理想情况下，我希望画布固定在其初始位置。谢谢你，明白了@Michael_B感谢所有的帮助，我最终解决了这个问题，只在player div上应用了

display:flex

，效果很好。画布向上移动，因为容器具有

justify content:center

。这意味着当段落在高度上展开时，画布必须向上移动，以便线条保持居中。不清楚你想发生什么。你想把画布固定在屏幕上吗？你能展示一个工作画面吗fiddle@Michael_B哦，对了，我忘了。理想情况下，我希望画布固定在其初始位置。谢谢你，明白了@Michael_B感谢所有的帮助，我最终解决了这个问题，只在player div上应用了

display:flex

，效果非常好。