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
4 Replies
remove the width property from box?
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 wantI think you gonna need some js for that then
maybe clamp could be used
Add a max-width?