Help with simple height animation?

https://codepen.io/DovahTheKiin/pen/BabqBGE I want to make second div change it's height and that first one, together with it's content to follow it, but I want to avoid any hard-coded values. something like this Kevin's video: https://www.youtube.com/watch?v=B_n4YONte5A I also need for second div to be glued to the bottom of the body all the time, without absolute units. I remember seeing code something like this for "glued to the bottom" problem.
.container {
display:grid;
grid-template-rows: auto 1fr;
}
.container {
display:grid;
grid-template-rows: auto 1fr;
}
Kevin Powell
YouTube
The simple trick to transition from height 0 to auto with CSS
Animating or transitioning to and from height auto is, well, not really possible (though it is being worked on!), but luckily, there is actually a solution using CSS Grid that’s really easy to implement! 🔗 Links ✅ Keith J. Grant’s article on this (also includes a flexbox solution): https://keithjgrant.com/posts/2023/04/transitioning-to-height-...
2 Replies
Skriti mož
Skriti mož9mo ago
Did you already try anything (don't see any css)?
Dovah
Dovah9mo ago
@Skriti mož Of course. That is why I'm here asking for help. xD
Want results from more Discord servers?
Add your server