I've been playing around with jsfiddle, after not being able to get the design working in my project, and I'm still coming up short. I'm using Tailwind but that shouldn't matter, I can style anything I need to any way I need to.
Either I can get a scroll bar, but it's for the whole page, or I can lock the page from scrolling but the content then just overflows the bounds of the parent even though I have overflow-y set to scroll.
In pseudocode I want a page to look like this:
<header> #static/attached to top. No scroll bar to the side.<body> #scrollable. Scroll bar always present.<text input> #static/attached to bottom. No scroll bar to the side.Here is the JS fiddle (https://jsfiddle.net/o6yjnmtp/2/), and the CSS is below. The elements more or less need to stay there due to templating. I do have full control over the styling of all of the elements. If looking at the JSFiddle, note that I do have the body tag set with styling as well.
<body class="min-w-full min-h-full h-screen flex flex-col"><div name="window" class="min-w-full overflow-hidden flex flex-col"><div class="overflow-hidden flex flex-col"><div id="story" class="min-w-full flex flex-col flex-1 justify-end overflow-y-scroll" phx-window-keyup="hotkey"> # CONTENT GOES HERE</div></div><input id="prompt" type="textarea" class="min-w-full rounded-lg resize-y flex-shrink" placeholder="Enter Commands Here..."></div></body>I am only concerned with getting this working in the latest Chrome browser for now. Here are the references for the above classes if more detailed info is needed.
