# Flex containers act differently in firefox and edge

**URL:** <https://forum.inductiveautomation.com/t/flex-containers-act-differently-in-firefox-and-edge/114691>\
**Category:** Ignition\
**Tags:** perspective, ignition83\
**Created:** [March 26, 2026, 9:00am UTC](https://forum.inductiveautomation.com/t/flex-containers-act-differently-in-firefox-and-edge/114691 "2026-03-26T09:00:03Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcl](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mcl](https://forum.inductiveautomation.com/u/mcl)\
**Post date:** [March 26, 2026, 9:00am UTC](https://forum.inductiveautomation.com/t/flex-containers-act-differently-in-firefox-and-edge/114691/1 "2026-03-26T09:00:03Z")

</div>

I have noticed from a college that uses firefox that a view i made look weird for him, but I for me it looked as it should.

I have made a quick sketch to how it looks in both browsers, where i have 2 flex containers at the top, the right one has another flex container, with 3 components, with the basis set to AUTO, grow and shrink is 0. I then have a toggle switch that toggles the display of a label, and here the container should change size depending on how many components are shown.

This is in edge and this is how it should look like:  
toggle off

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/8/98771d37fcbe4c9d572ca858ff6e4c45cf30dc3d.png)

Toggle On

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

How it shouldn’t look like in firefox:  
toggle off

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

toggle on

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7facee5594eb33b03e1c99234d1e81ec9f3bfd5e.png)

As you can see in edge the container with the components are shown, where as in firefox the container doesn’t change in size realy.  
I know these two browsers has different engines, which have something to do with it, but Im not a CSS expert and Im look for some advise for how i should design view for all browsers

---

<div class="post-metadata">

**Author:** ![Alejandro\_Alaco](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/alejandro_alaco/32/59849_2.png) [@Alejandro\_Alaco](https://forum.inductiveautomation.com/u/Alejandro_Alaco)\
**Post date:** [March 26, 2026, 10:16am UTC](https://forum.inductiveautomation.com/t/flex-containers-act-differently-in-firefox-and-edge/114691/2 "2026-03-26T10:16:59Z")

</div>

You may try have fixed width binded to the width property of the flex container

Step-by-step

1. Select your **Flex Container**
2. Go to:

props.style.width

1. Add a **binding (Expression)** like this:

if({path/to/yourSwitch.props.selected}, "300px", "80px")

Example:

- Switch ON → `300px` (expanded)
- Switch OFF → `80px` (collapsed)

---

<div class="post-metadata">

**Author:** ![mcl](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@mcl](https://forum.inductiveautomation.com/u/mcl)\
**Post date:** [March 26, 2026, 11:28am UTC](https://forum.inductiveautomation.com/t/flex-containers-act-differently-in-firefox-and-edge/114691/3 "2026-03-26T11:28:47Z")

</div>

that seems to be a nice an simple solution.  
Thanks