Make scrollable element in fix sized screen #17701

noahfraiture · 2025-04-16T20:04:21Z

noahfraiture
Apr 16, 2025

Hello,

I'm trying to make card that take the full screen not matter the length of the content in it, and become scrollable on overflow. I know about the overflow-y-scroll but it doesn't work. I tried multiple things and this is what I have now.

I use templ for my html rendering but you shouldn't have a problem to read it
base.templ

<body class="bg-base-300 text-base-content flex flex-col h-screen">
	@partials.Nav()
	<main id="main" class="p-4 w-full flex-1">
		{ children... }
	</main>
</body>

home.templ

templ homeContent(sheet models.SheetTempl) {
	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
		@leftPanel(sheet)
		// @rightPanel(sheet)
	</div>
}

templ leftPanel(sheet models.SheetTempl) {
	<div class="card card-border bg-base-200 shadow-lg p-6 flex flex-col">
		<h2 class="card-title">{ sheet.Title }</h2>
		<div id="sheet" class="flex flex-col">
			@partials.GuideContent(sheet)
			@partials.Buttons(sheet)
		</div>
	</div>
}

partials

templ GuideContent(sheet models.SheetTempl) {
	<div class="h-screen overflow-y-scroll">
		@templ.Raw(sheet.SheetContent)
	</div>
}

templ Buttons(sheet models.SheetTempl) {
	<div class="flex justify-center items-center gap-4">
	// ...
	</div>
}

As you can see the objective is to have two column of cards. Let's focus on the one of the left which is a single long column. The card should always take the full height of the screen, and when there's too much content, become scrollable. The problem is the following :

previously I managed things with flex-col and flex-1, but because it is relative height, the overflow property doesn't work. So my only solution has been to add h-screen to the content of the guide, however taking the height of the screen isn't the solution because there's other content on top of the page (the nav bar) which create an overflow.
How am I supposed to mangage that overflow without a fix number height ?

Edit : I got some help on discord, going from https://play.tailwindcss.com/EuMTScWVr8 to https://play.tailwindcss.com/VJxVI1vxJR

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make scrollable element in fix sized screen #17701

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Make scrollable element in fix sized screen #17701

noahfraiture Apr 16, 2025

Replies: 0 comments

noahfraiture
Apr 16, 2025