I believe your main component’s primary frame is set to “fixed height”. I had the same issue before. when you set it to FIXED, it will try to keep the size equal to the first variant (which in yours, is the collapsed version). hug content will fix your problem, I don’t know why but it doesn’t work if you only change the instance, the main component should be hugged itself.

let me know if it didn’t work.

I tried this but it still seems to malfunction unless its the main component inside the frame.

I’ll share a file with the components inside: https://www.figma.com/file/e5zn2N8V3hxsUtvlqTvhzj/Test?type=design&node-id=0%3A1&mode=design&t=ymU6BJpHfXts6HWE-1

Is it possible to make it have fixed height since i want there to be some empty space within the frame?

Many thanks for the help!

Thank you for sharing the file. I checked the component. the reason that it doesn’t work is that your chapter components (it’s named Component 29) didn’t have auto layout. This usually happens when you have nested components:

lets say you have a menu component (I call it menu), that contains some smaller instances of another component named ListItem. your menu component should contain hugged-content instance of ListItem. if you don’t do that, somehow it cannot track the original size of listItem’s variants, instead, it will always use the fixed size you haved used in the menu (like it’s overriden). to fix this problem, make sure you listItem component is on autolayout and is able to resize in all of it’s variants. then, use it in the menu component.

check out your file again. I created a copy of your components and edited them. Hope this helps.

Thank you Armin, this solved the issues.

you are a true asset to the Figma community! 🙏