# \[BUG\] Flex containers set to auto basis don't size correctly

**URL:** <https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061>\
**Category:** Ignition\
**Created:** [March 23, 2025, 11:40pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061 "2025-03-23T23:40:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 23, 2025, 11:40pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/1 "2025-03-23T23:40:04Z")

</div>

Recently, more often than not I've noticed that when I add components into a flex container and have a mixture of fixed and auto basis, with the flex container basis being set to auto as well, the flex container size doesn't get set correctly and is too short. The fix/workaround is to set the style.width/height (depending on flex direction) of the components with fixed basis to the same size as their basis, but it's a bit annoying having to set it twice.

Demo below of a label and a dropdown menu inside a flex container, where this flex is contained within a parent flex that has some buttons as well. The label is set to `auto` basis and the dropdown is set to `250px`. I've added top/bottom padding so you can see the buttons behind it. If I don't set `style.width` then this is how it displays:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/6/760a77d4ff2e01b491c27462a28aba8dcd139f28.png)

After adding style.width:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/9/898da491a847768327d1cfacd7e81874708fc380.png)

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [March 24, 2025, 2:28pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/2 "2025-03-24T14:28:37Z")

</div>

Shouldn't the container be a direct translation into a CSS flex container? Have you inspected the page elements to see if it's translating properly? Otherwise it would suggest a bug in the browser's interpretation of CSS, which doesn't seem likely...

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [March 26, 2025, 4:49pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/3 "2025-03-26T16:49:29Z")

</div>

I just wanted to say that I also don't experience this bug and I do what you describe pretty much all the time (mix fixed and auto basis). Sometimes, I do notice that the CSS setting almost doesn't apply, but if I click on another component or (in more extreme scenarios), close and reopen the view, it'll work normally. Most of the time, it works exactly how I would expect and how you describe.

This is for a smattering of versions, from about 8.1.25 to the current version.

The only thing I would suggest is to check the devtools as @Ryan_Deardorff suggested, to see if you have a CSS global override defined somewhere in a theme file, the advanced stylesheet, or as an "injection".

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 26, 2025, 9:00pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/4 "2025-03-26T21:00:26Z")

</div>

Can you guys try with a label and an icon? Where the label is auto and icon is say 30px

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [March 26, 2025, 9:22pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/5 "2025-03-26T21:22:46Z")

</div>

I'm not totally following, but here is a start:

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

Can you explain what you want me to test?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2025, 3:18am UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/6 "2025-03-27T03:18:10Z")

</div>

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

~~OuterFlex~~ OF\_C1 has scrollbars despite being set to auto basis... I'll dig into the CSS

> **OuterFlex JSON**
>
> ```python
> [
> {
> "type": "ia.container.flex",
> "version": 0,
> "props": {
> "style": {
> "border": "1px solid lightgreen",
> "padding": "5px",
> "gap": "5px"
> }
> },
> "meta": {
> "name": "OuterFlex"
> },
> "position": {
> "basis": "200px"
> },
> "custom": {},
> "children": [
> {
> "type": "ia.container.flex",
> "version": 0,
> "props": {
> "style": {
> "border": "1px solid pink",
> "padding": "5px",
> "gap": "5px"
> }
> },
> "meta": {
> "name": "OF_C1"
> },
> "position": {
> "shrink": 0
> },
> "custom": {},
> "children": [
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "text": "OF_C1_C1",
> "style": {
> "border": "1px solid skyblue"
> }
> },
> "meta": {
> "name": "OF_C1_C1"
> },
> "position": {
> "shrink": 0,
> "basis": "100px"
> },
> "custom": {}
> },
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "text": "OF_C1_C2",
> "style": {
> "border": "1px solid skyblue"
> }
> },
> "meta": {
> "name": "OF_C1_C2"
> },
> "position": {
> "shrink": 0,
> "basis": "90px"
> },
> "custom": {}
> }
> ]
> },
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "text": "OF_C2",
> "style": {
> "border": "1px solid pink"
> }
> },
> "meta": {
> "name": "OF_C2"
> },
> "position": {
> "shrink": 0,
> "basis": "150px"
> },
> "custom": {}
> },
> {
> "type": "ia.display.label",
> "version": 0,
> "props": {
> "text": "OF_C3",
> "style": {
> "border": "1px solid pink"
> }
> },
> "meta": {
> "name": "OF_C3"
> },
> "position": {
> "grow": 1,
> "basis": "150px"
> },
> "custom": {}
> }
> ]
> }
> ]
> 
> ```

Edit:  
I see this in the Computed styles for that flex container which is odd...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/4/c48b439df55c96dff92992edaaf244e5241a1ff7.png)

I can see that it's definitely applying `flex: 0 0 auto` to the ~~OuterFlex~~ OF\_C1 which is correct.

This is the View JSON itself:

> **View JSON**
>
> ```python
> {
> "custom": {},
> "params": {},
> "props": {},
> "root": {
> "children": [
> {
> "children": [
> {
> "children": [
> {
> "meta": {
> "name": "OF_C1_C1"
> },
> "position": {
> "basis": "100px",
> "shrink": 0
> },
> "props": {
> "style": {
> "border": "1px solid skyblue"
> },
> "text": "OF_C1_C1"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "OF_C1_C2"
> },
> "position": {
> "basis": "90px",
> "shrink": 0
> },
> "props": {
> "style": {
> "border": "1px solid skyblue"
> },
> "text": "OF_C1_C2"
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "OF_C1"
> },
> "position": {
> "shrink": 0
> },
> "props": {
> "style": {
> "border": "1px solid pink",
> "gap": "5px",
> "padding": "5px"
> }
> },
> "type": "ia.container.flex"
> },
> {
> "meta": {
> "name": "OF_C2"
> },
> "position": {
> "basis": "150px",
> "shrink": 0
> },
> "props": {
> "style": {
> "border": "1px solid pink"
> },
> "text": "OF_C2"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "OF_C3"
> },
> "position": {
> "basis": "150px",
> "grow": 1
> },
> "props": {
> "style": {
> "border": "1px solid pink"
> },
> "text": "OF_C3"
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "OuterFlex"
> },
> "position": {
> "basis": "200px"
> },
> "props": {
> "style": {
> "border": "1px solid lightgreen",
> "gap": "5px",
> "padding": "5px"
> }
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "root"
> },
> "props": {
> "direction": "column",
> "style": {
> "padding": "5px"
> }
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 27, 2025, 7:46am UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/7 "2025-03-27T07:46:46Z")

</div>

Sounds similar to this issue you had a 3 years ago

> [@\[BUG\] Perspective flex "auto" not behaving as expected with icon and svg](https://forum.inductiveautomation.com/t/bug-perspective-flex-auto-not-behaving-as-expected-with-icon-and-svg/56604/15):
>
> So i ran against this problem myself the other day, but in a tottaly different situation with one of my custom components. So i put on some javascript to debug and it seems like the svgs are doing weird things with their width in flex containers. This seems to be a browser issue, not ignitions fault. You can fix it by putting a width in the style of the svg/icon! @nminchin i just tested it out on the example you once send and it seems to work for this too [image] [image] adding a width to …

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2025, 8:44am UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/8 "2025-03-27T08:44:44Z")

</div>

yep 🙂 except this time it's not working with simple labels either...

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [March 27, 2025, 1:33pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/9 "2025-03-27T13:33:16Z")

</div>

> [@nminchin](#):
>
> OuterFlex has scrollbars despite being set to auto basis

Auto basis doesn't prevent scrollbars. Those are determined by the `overflow` propery.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2025, 1:39pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/10 "2025-03-27T13:39:34Z")

</div>

Auto basis _should_ prevent scrollbars on the flex container that it's defined on though, since setting to auto should size the flex container large enough to fit all of its components, therefore scrollbars on that flex are eliminated. If the containing flex isn't large enough however to contain it, tjhen that containing flex will get scrollbars. But that isn't the case here.

Actually, in your quote of mine, I should have refered to OF\_C1, not OuterFlex, as it's OF\_C1 that has the scrollbars which shouldn't

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [March 27, 2025, 1:44pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/11 "2025-03-27T13:44:46Z")

</div>

Yes, that is determined by whether the container it is in has enough space, which in the case of your screenshot indicates that OF\_C2 and OF\_C3 are taking up more space than they need to. What is their basis set to?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2025, 1:48pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/12 "2025-03-27T13:48:22Z")

</div>

> [@Ryan\_Deardorff](#):
>
> that is determined by whether the container it is in has enough space

This isn't correct. `basis: auto` will (should) size the component to _fully emcompass all of its contents_ (if shrink is off), regardless of the size of the container it's in. Containers with `basis: auto` should _never_ have scrollbars on them directly, it's the parent that would get the scrollbars, so OF\_C2 and OF\_C3's basis is irrelevant.  
However, these are 90px and 150px respectively, but C3 is set to grow

If someone can import that View (copy json, create new View, paste JSON onto the new view with Shift+right click) and test on their system though, that would tell me if it's something in my system or not.. if could be, there's a lot of theme CSS.

> [@nminchin](#):
>
> This is the View JSON itself:

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [March 27, 2025, 2:05pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/13 "2025-03-27T14:05:27Z")

</div>

The component will size to fill all of its contents, but if its _containing_ component has other components that compete with it for space, then it will have scrollbars. Consider this case where the Flex is set to `auto 1 1`, and the button is set to `50% 0 0`, and the width of the dropdown is too big for everything to fit:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/1/91cffc6150aa84fe8f8dc560e47b219ec2b173a8.png)

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 27, 2025, 2:59pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/14 "2025-03-27T14:59:16Z")

</div>

> [@nminchin](#):
>
> If someone can import that View (copy json, create new View, paste JSON onto the new view with Shift+right click) and test on their system though, that would tell me if it's something in my system or not..

Hey Nick, this is what mine shows:

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2025, 9:01pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/15 "2025-03-27T21:01:00Z")

</div>

> [@Ryan\_Deardorff](#):
>
> Consider this case where the Flex is set to `auto 1 1`, and the button is set to `50% 0 0`, and the width of the dropdown is too big for everything to fit

Of course, because shrink is now set to True. But with shrink off, it should never have scrollbars

> [@jlandwerlen](#):
>
> this is what mine shows

Looks like you have the bug as well, what version is that in?

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 27, 2025, 9:03pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/16 "2025-03-27T21:03:30Z")

</div>

8.1.47.  
Are you sure this is a bug?

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [March 27, 2025, 9:18pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/17 "2025-03-27T21:18:31Z")

</div>

My example works the same even if shrink is 0. It has to, because the button set to 50% no shrink restricts the Flex to be only 50% of the parent container's width. The only way to control the existence of a scrollbar is with `overflow`.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 27, 2025, 10:57pm UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/18 "2025-03-27T22:57:24Z")

</div>

I think we're getting our wires crossed.

This started when considering this example:

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

OF\_C1 has `flex: 0 0 auto` (grow:0, shrink:0, basis:auto) and is contained within OuterFlex. The components within OF\_C1 are both set to fixed widths which sum to 100+90+5(1x gap) px=195px, and 0 grow/shrink. This means that OF\_C1 should be auto-sized to 195px to fit its contents, and should not have scrollbars. It doesn't matter where OF\_C1 exists, if it's in a flex container that is \< 195px in width, OF\_C1 should _not_ have scrollbars; the parent flex would have scrollbars in this case.

In the case above though, the containing flex, OuterFlex, has enough room to fully contain all 3x components within it, so there shoudl be no scrollbars whatsoever 😕

OF\_C1 width evaluates to 195px  
OF\_C2 is set to `flex: 0 0 150px`  
OF\_C3 is set to `flex: 1 1 150px`

195+150+min(150)+10px(2x gaps) = 505px. OuterFlex is 790px wide so it has enough room to fully contain all 3 components without scrollbars

---

<div class="post-metadata">

**Author:** ![dgillbee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dgillbee/32/73838_2.png) [@dgillbee](https://forum.inductiveautomation.com/u/dgillbee)\
**Post date:** [March 28, 2025, 6:39am UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/19 "2025-03-28T06:39:38Z")

</div>

Hi Nick,

I imported your view and I see the same thing as you. It's like the basis isn't calculating the contents correctly. I've seen this on other objects before, but labels is surprising. I think you should raise this as a ticket with IA Support.

The question is, is this an Ignition issue or CSS?

You most likely already know this but, as grow and shrink are both set to 0. The basis is essentially a fixed width. If you set a manual min-width then the `basis: auto` respects the children's collective width.

```python
min-width: 100px
min-width: 90px

```

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

Also, when setting the children as `basis: auto` the parent container also starts to respect the contents width. It seems specific for a fixed pixels basis.

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [March 28, 2025, 8:04am UTC](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061/20 "2025-03-28T08:04:20Z")

</div>

I found the better way to do this, rather than to set both basis and a width to the same value, to instead set basis to auto and then just set the width (I was just using `style.width`) to the fixed width you want. But yeah I'll probably raise it with support officially as it's quite annoying! Not to mention n00b-hostile

[Next page](https://forum.inductiveautomation.com/t/bug-flex-containers-set-to-auto-basis-dont-size-correctly/104061.md?page=2)