# Struggling with flex container consistency

**URL:** <https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 3, 2025, 1:45pm UTC](https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419 "2025-01-03T13:45:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brian\_Stilson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brian_stilson/32/73410_2.png) [@Brian\_Stilson](https://forum.inductiveautomation.com/u/Brian_Stilson)\
**Post date:** [January 3, 2025, 1:45pm UTC](https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419/1 "2025-01-03T13:45:15Z")

</div>

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:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/d/0ddd6df666ad05967530ac20fe4eca960c336204.png)

And here's the other:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/64d2b86860c356c9cba565ca5cc440b1f3805f02.png)

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/6/2649d0bb8a4f462fa18c0e8d331b3c4cddb712d0.png)

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?

---

<div class="post-metadata">

**Author:** ![ryan.perretta](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.perretta/32/75110_2.png) [@ryan.perretta](https://forum.inductiveautomation.com/u/ryan.perretta)\
**Post date:** [January 3, 2025, 2:09pm UTC](https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419/2 "2025-01-03T14:09:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Brian\_Stilson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brian_stilson/32/73410_2.png) [@Brian\_Stilson](https://forum.inductiveautomation.com/u/Brian_Stilson)\
**Post date:** [January 3, 2025, 2:15pm UTC](https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419/3 "2025-01-03T14:15:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [January 3, 2025, 2:21pm UTC](https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419/4 "2025-01-03T14:21:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Brian\_Stilson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/brian_stilson/32/73410_2.png) [@Brian\_Stilson](https://forum.inductiveautomation.com/u/Brian_Stilson)\
**Post date:** [January 3, 2025, 2:31pm UTC](https://forum.inductiveautomation.com/t/struggling-with-flex-container-consistency/100419/5 "2025-01-03T14:31:30Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f192df2213a0c6c1c3569cfbd8b9d66e508f6c4b.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/0/d03e9debfe2ed5cde6e84493474810e83411d87f.png)
