# \[Bug\] Perspective Flex Container 'auto' Basis Not Calculating Size Correctly

**URL:** <https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [July 15, 2021, 9:40pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900 "2021-07-15T21:40:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![tjsykora](https://avatars.discourse-cdn.com/v4/letter/t/b2d939/32.png) [@tjsykora](https://forum.inductiveautomation.com/u/tjsykora)\
**Post date:** [July 15, 2021, 9:40pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/1 "2021-07-15T21:40:46Z")

</div>

I keep running into an issue with flex containers and flex repeaters not calculating the size correctly when using the ‘auto’ basis. I saw and responded to another post with this same or a very similar issue, but I searched and didn’t see any posts directly discussing this as a bug. Here is a simple example showing what I’m talking about:

![Example 1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/2/b22b37e038e86fa968e26aa59b3171a84b5d3e70.png)

This is the structure for the view:

![View Structure](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/6/362c59b688ec2810ee162a551125d600e844ab7a.png)

The relevant position props:

- **root (Flex row):** width: 200, height: 50
- **FlexContainer (row):** grow: 0, shrink: 0, basis: auto
- **Icon:** grow: 0, shrink: 0, basis: 50px
- **Label:** grow: 0, shrink: 0, basis: auto _(this can also be set to a fixed width and the same issue occurs)_

And after scrolling all the way to the right you can see the width of the FlexContainer is the exact width of the label:

![Example 2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/2/626c83b0202f4646c1a0b744f55d5a5d25e21de3.png)

If I add margins of 10 on the left and right to the icon and label you can see it will add 40 to the container width, but it still cuts off at the right edge of the label’s text:

![Margin Example](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/a/ca7db2a0b8cf279062cfcc5c99704ee8ad1b558a.png)

I’ve also experienced this with other components in place of the icon such as an empty container and an image. To me this definitely doesn’t seem like intended behavior and has given me trouble with using flex repeaters as well as grouping components together that are intended to run the same script, open the same popup when hovered over, etc. Maybe I’m just overlooking something, but I’ve messed around quite a bit with the relevant props and haven’t gotten anything to work.

---

<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:** [July 16, 2021, 4:22am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/2 "2021-07-16T04:22:04Z")

</div>

I see this as well, would be good to get it fixed! Been meaning to report it myself for a while

---

<div class="post-metadata">

**Author:** ![tjsykora](https://avatars.discourse-cdn.com/v4/letter/t/b2d939/32.png) [@tjsykora](https://forum.inductiveautomation.com/u/tjsykora)\
**Post date:** [August 5, 2021, 3:44pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/3 "2021-08-05T15:44:32Z")

</div>

I saw this in the 8.1.8 release notes and figured I’d see if this bug was fixed with it, but it’s still present.

![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/c/6c7178fb1635abe33b76ad1ca5c9f4275cb49705.png)

---

<div class="post-metadata">

**Author:** ![matthew.gollasch](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/matthew.gollasch/32/26382_2.png) [@matthew.gollasch](https://forum.inductiveautomation.com/u/matthew.gollasch)\
**Post date:** [October 22, 2021, 2:10am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/4 "2021-10-22T02:10:11Z")

</div>

Good post, this bug is very frustrating. It would be good to get a fix.

---

<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:** [October 22, 2021, 7:19am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/5 "2021-10-22T07:19:37Z")

</div>

This is something from css, handled by the browsers. Not really something ignition can do something about. As you’ll if you use it in firefox it will grow to full screen.

Why dont you set on grow? its like the only reason to use flex containers… to have them flex xD

---

<div class="post-metadata">

**Author:** ![tjsykora](https://avatars.discourse-cdn.com/v4/letter/t/b2d939/32.png) [@tjsykora](https://forum.inductiveautomation.com/u/tjsykora)\
**Post date:** [October 22, 2021, 12:44pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/6 "2021-10-22T12:44:46Z")

</div>

There are many times when I need a container with the exact width of some dynamic text + an icon, color swatch, etc. As of now, the only other options would be to not use templates for some of these components, set it to a fixed width, or find some workarounds, which I’ve done in the past but have always been hacky and time consuming.

---

<div class="post-metadata">

**Author:** ![Kyle\_Muller](https://avatars.discourse-cdn.com/v4/letter/k/cc9497/32.png) [@Kyle\_Muller](https://forum.inductiveautomation.com/u/Kyle_Muller)\
**Post date:** [January 12, 2024, 5:51am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/7 "2024-01-12T05:51:14Z")

</div>

Any updates on this? Still an issue in 8.1.35

Does anyone have a workaround?

---

<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:** [January 18, 2024, 12:48am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-auto-basis-not-calculating-size-correctly/48900/8 "2024-01-18T00:48:25Z")

</div>

For icons and SVGs, I always set the `style.width` (or `height`, depending on flex direction) of them to ensure that auto sizing works. This means you end up with both a `position.basis` and `style.width` size that are identical which is a bit average... but it fixes the auto sizing problem
