[BUG] Flex Container not auto sizing properly

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

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

[
  {
    "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)

{
  "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"
  }
}

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:

# 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).

3 Likes

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.

View JSON:
view.json (25.2 KB)

I'm pretty sure buttons use a label component.