滚动页面时，更改元素的高度会将元素移出视口
Changing height of element moves element outside of viewport when page is scrolled
我们得到了显示文本框一小部分的卡片列表。该文本框通过 CSS 限制了高度。当用户点击“详细信息”时，文本框的高度通过 javascript 更改为内容的实际高度。
问题是，当视口 / window 滚动并且卡片高度增加时，它会将自己推出视口。当 window 根本没有滚动时，它起作用了。
请看以下视频：https://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv
0:00 -> 0:08 是我想要的开/关行为
0:09 -> 0:16 是我不想要的行为，因为顶部文本已移出视口。
有没有办法保持视口，最好不用JS？
编辑：这仅在 Chrome (84.0.41) 中发生，在 Firefox 和 Safari 中它按预期工作。
如有必要，我可以向您发送 link 暂存环境，请通过 info@felixhagspiel.de
与我联系
看起来它比您想要的更合乎逻辑。由于控件放置在底部元素中（错误 UI），最好将此控件保留在视口中（奇怪的是 chest Crome 这么认为）。
所以 display:flex 构建所有这些魔法 :)
请看例子
https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing
更新：也请删除
tabindex="0"
并使用 button 代替 div 以获得与键盘导航相同的逻辑。
视频最后 Chrome
Google Chrome 是最新的
版本 84.0.4147.89（正式版）（64 位）
我们得到了显示文本框一小部分的卡片列表。该文本框通过 CSS 限制了高度。当用户点击“详细信息”时，文本框的高度通过 javascript 更改为内容的实际高度。 问题是，当视口 / window 滚动并且卡片高度增加时，它会将自己推出视口。当 window 根本没有滚动时，它起作用了。
请看以下视频：https://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv
0:00 -> 0:08 是我想要的开/关行为
0:09 -> 0:16 是我不想要的行为，因为顶部文本已移出视口。
有没有办法保持视口，最好不用JS？
编辑：这仅在 Chrome (84.0.41) 中发生，在 Firefox 和 Safari 中它按预期工作。
如有必要，我可以向您发送 link 暂存环境，请通过 info@felixhagspiel.de
与我联系看起来它比您想要的更合乎逻辑。由于控件放置在底部元素中（错误 UI），最好将此控件保留在视口中（奇怪的是 chest Crome 这么认为）。
所以 display:flex 构建所有这些魔法 :)
请看例子 https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing
更新：也请删除
tabindex="0"
并使用 button 代替 div 以获得与键盘导航相同的逻辑。
视频最后 Chrome Google Chrome 是最新的 版本 84.0.4147.89（正式版）（64 位）