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

Question

We got a list of cards that show a small part of a textbox. That textbox is limited in height via CSS. When a user clicks on "Details" the textboxes height is changed via javascript to the real height of the content. The problem is, that when the viewport / window is scrolled and the cards height increases, it pushes itself out of the viewport. When the window is not scrolled at all, it works.

Please see the following video: https://monosnap.com/file/HauaJrJlkx2MBLGt3QOa5ulJMxFTnv

0:00 -> 0:08 is the desired opening / closing behavior that I want

0:09 -> 0:16 is the behavior I do not want, as the top text is moved out of the viewport.

Is there a way to keep the viewport, preferably without JS?

Edit: This happens only in Chrome (84.0.41), in Firefox and Safari it works as expected.

I can send you a link to the staging environment if necessary, please contact me via info@felixhagspiel.de

Answer 1

Looks it's done more logical that you want to be. As control placed in a bottom element (bad UI) better keep this control in viewport (strange that chest Crome thinks so).

So just display:flex build all this magic:)

Please look examples https://drive.google.com/file/d/1faTDwJBQEv-V96O8-HC-8R2_hXkGzsQJ/view?usp=sharing

UPDATE: also please remove

tabindex="0" 

And use button instead div to get the same logic with the keyboard navigation.

On Video last Chrome Google Chrome is up to date Version 84.0.4147.89 (Official Build) (64-bit)