Struggling with flex container consistency

[Brian_Stilson]

In my project, I have two views. The root container on both is a Flex container set up as a column container, no wrap, flex-start justified, Items aligned center, and alignContent is set to Stretch

Here's one of my views:

And here's the other:

Each view also has a flex container inside the root container. Both of those are set accordingly:

The issue I'm having is the inconsistent width on these containers. The top view is fine, but the bottom view has the flex container all scrunched up. I've gone through all the basis, grow, and shrink and I cannot for the life of me figure out what governs the WIDTH on a column flex container when it's being centered in another flex container. I guess that's my question. How do I control this?

[rperretta]

Couple of additional questions:

1. Could you share a screenshot of the view structure in the project browser?

2. Do you have any additional style rules applied to either container? In the root are you adding any padding? Are there any rules that may affect position or sizing in the form style class you have defined on the inner flex container?

In my experience, the contents of a column flex container should fit the width automatically unless there are any style rules changing that.

[Brian_Stilson]

The only style settings I have in both root containers is margin: 8

I'm going to try and make the form a separate view and just bring it in as an embedded view into the root. I'll have better control over the size that way.

[amarks]

Getting flex containers to behave is my least favorite part of perspective. Thankfully, these types of views are rarely required in my line of work.

[Brian_Stilson]

OK. I ended up fixing it by creating a template view where I have the root flex container. The form parts are their own views with the same base widths. So now it's just an embedded view on the template with a parameter for the view path. They are now all consistent widths