Hr component inner child invalid positioning

[kapipapi]

Describe the bug

Children of <Hr/> are rendered with position: absolute;, but container div did not have position: relative; then children are rendered absolute to screen rather component.

flowbite-svelte/src/lib/typography/hr/theme.ts

Lines 8 to 12 in dfd44bc

	slots: {
	base: "h-px my-8 bg-gray-200 border-0 dark:bg-gray-700",
	div: "inline-flex items-center justify-center w-full",
	content: "absolute px-4 -translate-x-1/2 rtl:translate-x-1/2 bg-white start-1/2 dark:bg-gray-900"
	},

Recording.2025-08-06.105052.mp4

Reproduction

// +layout.svelte
<script lang="ts">
	import '../../app.css';
	import type { LayoutProps } from './$types';
	let { children }: LayoutProps = $props();
</script>
<main class="h-[calc(100vh-9rem)] overflow-auto">
	{@render children()}
</main>

// +page.svelte
<script lang="ts">
	import { Hr } from 'flowbite-svelte';
</script>

<div style="height:1000px">
	<Hr>TEST</Hr>
	<Hr>TEST</Hr>
	<Hr>TEST</Hr>
	<Hr>TEST</Hr>
</div>

Version and System Info

System:
    OS: Windows 11 10.0.26100
    CPU: (22) x64 Intel(R) Core(TM) Ultra 7 155H
    Memory: 11.64 GB / 31.46 GB
  Binaries:
    Node: 23.6.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.8.1 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Edge: Chromium (137.0.3296.68)

"svelte": "^5.34.7",
"@sveltejs/kit": "^2.22.0",
"flowbite": "^3.1.2",
"flowbite-svelte": "^1.11.2",
"flowbite-svelte-icons": "^2.2.1",

[kapipapi]

When I remove one of classes from layout it's working properly...

h-[calc(100vh-9rem)] overflow-auto

Removing calc from height class also help.

Can someone explain what is happening here?