# \[BUG\] Flex Container not auto sizing properly

**URL:** <https://forum.inductiveautomation.com/t/bug-flex-container-not-auto-sizing-properly/68653>\
**Category:** Ignition\
**Created:** [January 17, 2023, 1:17am UTC](https://forum.inductiveautomation.com/t/bug-flex-container-not-auto-sizing-properly/68653 "2023-01-17T01:17:42Z")\
**Posts on this page:** 4\
**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:** [January 17, 2023, 1:17am UTC](https://forum.inductiveautomation.com/t/bug-flex-container-not-auto-sizing-properly/68653/1 "2023-01-17T01:17:42Z")

</div>

v8.1.23

I have a very simple test case that shows a flex container set to `basis: auto` not working properly. The flex container has 2 labels inside of it, both with fixed-sized basis settings, but the flex container isn't sizing itself to accommodate the two labels. Labels are "96" and "kWh", json copied below.

This is how it displays embedded into a flex View:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/3/730db22a786bdea230ec23cdd6ec80be2674d9ab.png)

If I set the labels' to `basis: auto` then the flex container sizes properly. If I set one label to `basis: auto` and one to fixed-size `basis: 150px`, it doesn't size properly.

**Flex container JSON**

```auto
[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {},
    "meta": {
      "name": "FlexContainer_2"
    },
    "position": {
      "shrink": 0
    },
    "custom": {},
    "children": [
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": 96
        },
        "meta": {
          "name": "Label"
        },
        "position": {
          "shrink": 0,
          "basis": "50px"
        },
        "custom": {}
      },
      {
        "type": "ia.display.label",
        "version": 0,
        "props": {
          "text": "kWh"
        },
        "meta": {
          "name": "Label_0"
        },
        "position": {
          "shrink": 0,
          "basis": "55px"
        },
        "custom": {}
      }
    ]
  }
]

```

**View JSON** (includes flex container above)

```auto
{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 98
    }
  },
  "root": {
    "children": [
      {
        "children": [
          {
            "meta": {
              "name": "Label"
            },
            "position": {
              "basis": "80px",
              "shrink": 0
            },
            "props": {
              "text": 96
            },
            "type": "ia.display.label"
          },
          {
            "meta": {
              "name": "Label_0"
            },
            "position": {
              "basis": "50px",
              "shrink": 0
            },
            "props": {
              "text": "kWh"
            },
            "type": "ia.display.label"
          }
        ],
        "meta": {
          "name": "FlexContainer_2"
        },
        "position": {
          "shrink": 0
        },
        "props": {
          "style": {
            "gap": "50px"
          }
        },
        "type": "ia.container.flex"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.flex"
  }
}

```

---

<div class="post-metadata">

**Author:** ![cmallonee](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cmallonee/32/6416_2.png) [@cmallonee](https://forum.inductiveautomation.com/u/cmallonee)\
**Post date:** [January 18, 2023, 7:36pm UTC](https://forum.inductiveautomation.com/t/bug-flex-container-not-auto-sizing-properly/68653/2 "2023-01-18T19:36:01Z")

</div>

Oh boy... here we go.

What you're seeing is an unfortunate side-effect of our work to allow for alignment of Label text.

_harp sounds as we go back in time_

Originally (8.0Alpha), Labels were just `<span>` elements, but spans don't allow for vertical alignment. To allow for that, we wrapped the `<span>` in a `<div>` with `display:flex` and `flex-direction:column`. Well, it turns out that there are some idiosyncrisies in regard to CSS rules for rendering a flex column which result in it not truly reporting its `basis` and instead reporting how much space it "needs".

In your scenario, the Flex Container which contains the Labels is calculating the "required" space in the following manner:

```auto
# 50px gap + 10px per string character
50px + (10px * (len("96") + len("kWh")))
50px + (10px * (2 + 3))
50px + (10px * 5)
50px + 50px
100px

```

You can test this yourself by modifying the gap value or even the string values within the Labels.

It might be fair to consider this a bug, but it's not one we're likely to fix because we are totally reliant on this flex wrapper for Labels.

**Workaround:**  
Wrap the Labels in a Coordinate Container AND set the `mode` of the wrapping Coordinate Container to "fixed". This results in the Coordinate Container having a basis AND not having `display:flex` (which is what the initial wrapping has because it's percent mode).

---

<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, 6:15am UTC](https://forum.inductiveautomation.com/t/bug-flex-container-not-auto-sizing-properly/68653/3 "2024-01-12T06:15:11Z")

</div>

I'm experiencing this problem for views even without a label component. Is it caused by having a flex within a flex with auto basis and grow=0?

Here's an example with just buttons.

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

**View JSON** :  
[view.json](https://forum.inductiveautomation.com/uploads/short-url/h7VobR0IfWCNzUgyZppBwtrP2c0.json) (25.2 KB)

---

<div class="post-metadata">

**Author:** ![Aaron\_Bazal](https://avatars.discourse-cdn.com/v4/letter/a/c37758/32.png) [@Aaron\_Bazal](https://forum.inductiveautomation.com/u/Aaron_Bazal)\
**Post date:** [February 16, 2024, 2:46pm UTC](https://forum.inductiveautomation.com/t/bug-flex-container-not-auto-sizing-properly/68653/4 "2024-02-16T14:46:57Z")

</div>

I'm pretty sure buttons use a label component.