Dynamic Column Height

Hi, I’m trying to resize a column flex container height based on its contents.

For a Column repeater container I managed a binding on the height property:

len({this.props.instances}) * ({this.props.elementPosition.basis} + 1) + 'px'

This is still not ideal, because the property {this.props.elementPosition.basis} still has to be set manually, I couldn’t find a way to bind it to the height of the view of the real element that is repeated.

In a column flex container I have the opposite problem. The elements can resize their view to the original height with the property useDefaultViewHeight. However, for this to work the property {position.basis} has to be left blank, so I cannot set the column height to the sum of its elements height.

Is there a property that can be added to get the column contents height or something similar and bind it to the parent view height?

I am having a hard time to fully understand what you are looking for exactly after reading your OP. But I wanted to ask if setting the flex container’s basis to auto helps you?

1 Like

I'm with @dillon on this: Why not just use auto as your container's basis ?
Set grow and shrink to 0, and basis to auto. Maybe add some padding and gap to make things look nice.

You shouldn't have to resort to calculating things... unless you're trying to animate the container's height with transition.
I've had to do this kind of things once, I needed containers to transition from 0 to their full size, and this doesn't work with auto. That's the only case I've encountered where auto wasn't enough.

1 Like