I try since days to get this working, but had no luck so far.
I have a page that will run on different sized screens and has dynamic contents, i need something that will make use of the available space. I have a Input box where i scan a barcode and then the other box will update accordingly, this works so far, the problem i have is that no matter what i use or do i always have some sort of static grid or sorting that will cutoff elements.
on the first image i had a state where everything moves around like i wanted but had this silly gaps evrywere.
on the other image if i resize the browser in height i would expect that there lower items would move to so right side but they dont do that, instead just get cutoff. there i used flexbox. Grid css also didnt to the trick because than the information item would always be on the right side and the space below the barcode would never be used.
hope someone here can safe my live. im using Svelte with tailwind css.
Actual Status of Flexbox in my Project
I tried CSS Grid and Flexbox, different (most outdated and non maintained) libarys/modules, ChatGPT