Скачать или смотреть Example: CSS interpolate-size

min-content、max-content and fit-content are magic keyword for describing length. Developers could set the suitable size through these value setting.

Howerver CSS animation won't running with these values. Because browser can't gether the exactly length information for mutation.

With CSS: interpolate-size setting, It's possible to run animation with these magin keywords. Browser will exchange the length before running animation, so the animation will run as good as you wish.

Check the sample out. It applied interpolate-size: allow-keywords for buttons section and set transition when its inline-size change（fit-content ←→ 40px）. The input field will bend when you type something.