I am building a chat application with SolidJS and TailwindCSS. The chat messages are displayed in a container using Solids component. Despite applying the appropriate tailwind classes, the chat window is not scrollable and no scrollbar appears.

<div class="flex flex-col justify-end box-border overflow-auto max-h-full grow basis-0 px-4 py-0 scroll-smooth">
      <For each={store.messages}>
        {({ message_id, message, prompt, sender, source }) => (
          <ChatMessage
            message_id={message_id}
            message={message}
            prompt={prompt}
            source={source}
            sender={sender}
          />
        )}
      </For>
    </div>

When checking the element in the developer console in the browser, the style is applied but doesn’t seem to take effect. According to the browser it’s not being overwritten by another style. All over styles are working.

Is there anything I am missing here?

Even though I am applying overflow-auto and have set the height and max height of the parent container, a scrollbar never appears. If I explicitly set overflow: scroll, a greyed out scrollbar appears that is not usable.