What is the best way to create a dynamically growing Stack Item in Fabric React?

Question

I have a use case where I have a sidepanel containing Searchbox, Some MessageBoxes and two lists which get filtered when user searches for something.

The searchbox and messagebox occupies the fixed height but I want both the lists to occupy equal height and grow if the browser resizes.

Also would be nice to shrink the list if there are less items in one of the lists to give more room to the other one.

Here's what the UI looks like...

I'm currently trying to calculate the height and assigning the height to both the lists manually on browser resize event but I was wondering if there's a better way to do that.

Thanks in advance :)

Answer 1

Use a Stack component, specifying the grow attribute on the Stack.Items that wrap your lists.

https://github.com/microsoft/fluentui/blob/master/packages/office-ui-fabric-react/src/components/Stack/examples/Stack.Vertical.Grow.Example.tsx