Allowing a Flex Repeater to grow based on number of instances

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.

basis = auto was the trick!

Thank you all!

1 Like