I am having trouble getting the content in a div to scroll on overflow. I've been playing around with it most of the day and haven't really got anywhere! I am using Tailwind for layout. Before I go into what I've tried, here's a link to a Tailwind playground demonstrating my issue: https://play.tailwindcss.com/S4U9ewEu98. I've made a couple of comments, I'm using React behind the scenes, so that's just the pasted output from Chrome, which is why there's a bit of a hack to set some styles on the divs with rsw class names.
I've looked here: CSS - flex grow height and enable overflow and, indeed, if I set a manual height on the div.tw-overflow-scroll on line 45, such as adding the tw-h-80 class, then it scrolls and only takes up that height (equivalent to height: 20rem;). However, I want this to completely fill any remaining space. If I replace that with tw-h-full, which is the equivalent of adding height: 100%; So it seems as if it's having an issue with percentage heights. I have indicated in the playground which lines to comment out to see what the layout should look like. It works fine when there's no overflowing content!
I've also read on other articles on here that adding a min-height: 0px to the flex child containing the overflowing container fixes it. Alas, it doesn't seem to. I've been tearing my hair out all day as surely this is easier than I'm finding it? I'd appreciate it if somebody could offer some assistance!
