Why doesn't % work when styling height ?

Hey, Thanks for the library. I have an issue with styling of my component. I’m trying to make my element responsive using % in CSS. The problem is that when I use % it doesn’t work but when I change to a static value (px or a number), it works. My code (that doesn’t work):

const style = css({
	height: "100%", //if I change this to a static value (`px` or a number),  it works
});
<div className="mobile_chat_content">
	<ScrollToBottom mode="bottom" className={style}>
		<button onClick={scrollToBottom}>
			Click me to scroll to bottom
		</button>
		{messages.map((message, i) => (
		       <Message
			   key={message.id}
			   text={message.content}
		        />
		))}
	</ScrollToBottom>
</div>

I want my component to be responsive to the container, I can not change this to a static value If anyone has suggestions to help me, it would be cool to let me know. Thanks in advance.

[pranavmehta]

Yes, this is a major bummer for me as well. I need my height to be responsive to fit the entire screen height.

What I did was:

1. create a wrapper div element with height: 100%; overflow: hidden that wraps <ScrollToBottom> component
2. In the useEffect hook, get the clientHeight of this element in and set it to the actual element you are trying to scroll to the bottom.

It works, but again, I am not happy with the hack. @compulim , is there a reason this does not work when the height is set in %?

UPDATE: The component actually works as expected even with % height without needing any hacks. The key is to set the proper CSS for the < ScrollToBottom > component itself. This is mentioned in the documentation (ROOT_CSS), but it’s purpose is not very clear. Anyway, just set the following CSS on your < ScrollToBottom > component and you’ll be fine:

.ScrollToBottom {
  height: 100%;
  overflow-y: auto;
  width: 100%;
}

[johannbuscail]

It works but as you said, it’s not the best solution. Thanks! Anyone else ?