Hi all,
I have a flex repeater in a flex container that I would like to grow to avoid the number of instances causing scroll bars on the side. Hopefully the below image will help explain what I mean if that doesn’t make sense!
I basically want to avoid the scroll bars highlighted in red by allowing the flex repeater to expand to roughly where the blue line is.
Is there a simple way to do this rather than have to use a script to calculate the repeaters height as I want to try to avoid issues with users resizing the page?
Try setting position.basis
of the repeater itself to 100%
, instead of a fixed pixel value.
1 Like
Wow thanks for the quick response!
Well it kind of works but it doesn’t seem to stop where I would expect it to (after the bottom of the last instance)
Instead it takes up what I would asume is 100% of the default height of the parent object in this case 800.
Ah, not a web developer by any means. Maybe auto
or content
or max-content
? https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis
I use auto
on the basis for anything that needs to fill only the space required
grow: 0
shrink: 0
basis: auto
and if that doesn’t quite look right set grow
and shrink
to 1.
1 Like
basis = auto was the trick!
Thank you all!
1 Like