Restrict element to dimensions of page

Is there some method to simply tell an element to not overflow the dimensions of the page and instead to just resize itself to stay within the pages dimensions? So, I have an element with a necessary position: absolute and its parent with a necessary position:relative;. I cant seem to position it relative to the page, because it will obviously always only position itself relative to its parent. https://svelte.dev/repl/cad337d2bc4e4f0cb51b1b24aafc09f1?version=4.2.12 See in the screenshot how it just overflows the width of the page. Is it possible to just let it collapse?
text overflow • REPL • Svelte
Cybernetically enhanced web apps
No description
4 Replies
Mannix
Mannix4mo ago
remove the width property from box?
Wonderbear
Wonderbear4mo ago
Oh and another very important detail: It should take all available space when possible (max-content) Then it collapses into the smallest possible width, which is also not what I want
Mannix
Mannix4mo ago
I think you gonna need some js for that then maybe clamp could be used
SvenSplynter
SvenSplynter4mo ago
Add a max-width?