Javascript 当页面滚动时，更改元素的高度会将元素移到视口之外

我们有一张卡片列表，上面显示了文本框的一小部分。该文本框通过CSS限制高度。当用户单击“详细信息”时，文本框的高度通过javascript更改为内容的真实高度。 问题是，当视口/窗口滚动且卡片高度增加时，它会将自己推出视口。当窗口根本没有滚动时，它就工作了

请看以下视频：

0:00->0:08是我想要的打开/关闭行为

0:09->0:16是我不想要的行为，因为顶部文本已移出视口

有没有办法保持视口，最好不要使用JS

编辑：这只发生在Chrome（84.0.41）中，在Firefox和Safari中，它按预期工作

---

如有必要，我可以向您发送登台环境的链接，请通过与我联系info@felixhagspiel.de

看起来，这样做更符合逻辑。当控件放置在底部元素（糟糕的UI）中时，最好将该控件保持在视口中（奇怪的是，胸部克罗姆这么认为）

所以只要

display:flex

构建所有这些魔法：）

请看例子

更新：也请删除

tabindex="0" 

并使用

按钮

代替

div

，以获得与键盘导航相同的逻辑

上一个Chrome视频 谷歌浏览器是最新的

---

84.0.4147.89版（官方版本）（64位）

你好，Felix，你真的需要发布一个for ppl来帮助你，你知道这个练习…@RenevanderLende是的，我知道，不幸的是，我们必须先检查是否允许发布到登台环境的链接（或者我们是否可以对其进行DM）。我会尽快给你发送链接，我们得到一个答复。另外，我刚刚注意到这是chrome唯一的问题。@RenevanderLende我可以用PM将链接发送到登台环境。如果您不想在此处发布电子邮件，请发送邮件至info@felixhagspiel.de如果你同意的话，我会详细回答。非常感谢。