Does this also fix the issue where the website header gets bumped up when the text input height increases?

In D3115#81944, @ashoat wrote:

Does this also fix the issue where the website header gets bumped up when the text input height increases?

yes

In D3115#81946, @ashoat wrote:

This diff is hard to review. You're not explaining what's going on or how you're fixing it. The diff description needs a lot more context.

As a reviewer, I ended up spending ~15min Googling around and reading docs, and I still don't understand what's going on. Why does 1fr fail to properly handle a multiline textarea inside of it changing height?

It's my understanding that calc has some significant performance costs and should be avoided when possible. Does auto work instead?

I'm accepting to unblock because this is an active regression, but would appreciate answers to the above.

Question 1:

Why does 1fr fail to properly handle a multiline textarea inside of it changing height?

The spec: https://www.w3.org/TR/css3-grid-layout/#fr-unit
this line here: fr unit, which represents a fraction of the leftover space in the grid container. Grid container is wrapped in other components with height: 100% containing the height defined here.

Question 2:

It's my understanding that calc has some significant performance costs and should be avoided when possible. Does auto work instead?

It seems very small: https://css-tricks.com/keep-math-in-the-css/.
Auto doesn't work, the same problem as before.

This is where I got the solution: https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/#calc

I consider them to be really good at CSS.

https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/#calc was super helpful to read. Sharing something like that makes it so much easier for your reviewer... turns 15 min for me + 15min for you into 3min for me.