Flex wrap enlarges my container (even when not wrapping)

[pascal.fragnoud]

Hello folks,

I’m facing a very frustrating behavior with flex containers and flex wrap, and it’s driving me a tiny bit mad.

Here’s a container in a container:

let’s call it middle container, and here are its properties:

props
  direction: row
  wrap: nowrap
  justify: flex-end
  alignItems: center
  alignContent: stretch
position
  grow: 1
  shrink: 1
  basis: auto

and the parent properties:

props
  direction: row
  wrap: nowrap
  justify: space-between
  alignItems: center
  alignContent: center
position
  grow: 0
  shrink: 0
  basis: auto

it contains other containers, each with these settings:

props
  direction: row
  wrap: nowrap
  justify: flex-start
  alignItems: stretch
  alignContent: stretch
position
  grow: 0
  shrink: 0
  basis: 120px # or 200px for the rightmost one

If I change from nowrap to wrap on middle container, the PARENT container gets bigger:

I tried changing pretty much every property on each of the 3 layers, but setting wrap on the middle one seems to always make the parent bigger. Unless I set a fixed height on this last one, which clearly makes wrapping things inside it quite ugly.

Can someone please help me make sense of this ?

[YF129701]

I tried reproducing what you described above and the parent didn’t grow for me, but maybe I don’t have the exact same setup… Would you be able to do an export of the view you’re working with?

[pascal.fragnoud]

Thanks for trying !
I’ll do an export when I get back on the machine where all of this lives.

[pascal.fragnoud]

Hello again,

It took a while but I’m finally back in the office.
Here’s the json for that part of the view:

click for json

[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "alignItems": "center",
      "alignContent": "center",
      "style": {
        "classes": "Base/padded_horizontal Base/rounded_corners Colors/background/topcard",
        "gap": "16px"
      }
    },
    "meta": {
      "name": "legend"
    },
    "position": {
      "shrink": 0
    },
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "alignItems": "center",
          "alignContent": "center"
        },
        "meta": {
          "name": "switch"
        },
        "position": {
          "shrink": 0
        },
        "custom": {},
        "children": [
          {
            "type": "ia.display.label",
            "version": 0,
            "props": {
              "text": "mode",
              "style": {
                "classes": "Text/label_medium"
              }
            },
            "meta": {
              "name": "mode_label"
            },
            "position": {
              "grow": 1
            },
            "custom": {}
          },
          {
            "type": "ia.input.toggle-switch",
            "version": 0,
            "props": {
              "color": {
                "selected": "#555555"
              }
            },
            "meta": {
              "name": "ToggleSwitch"
            },
            "position": {},
            "custom": {},
            "propConfig": {
              "props.selected": {
                "binding": {
                  "config": {
                    "bidirectional": true,
                    "path": "session.custom.display_safepos"
                  },
                  "type": "property"
                }
              }
            }
          },
          {
            "type": "ia.display.label",
            "version": 0,
            "props": {
              "text": "safe pos",
              "style": {
                "classes": "Text/label_medium"
              }
            },
            "meta": {
              "name": "safepos_label"
            },
            "position": {},
            "custom": {}
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "wrap": "wrap",
          "justify": "flex-end",
          "alignItems": "center"
        },
        "meta": {
          "name": "mode_container"
        },
        "position": {
          "grow": 1
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "auto"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/auto TcuState/legend_circle",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "AUTO",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "manual"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/legend_circle TcuState/manual",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "MANUAL",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "off"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/legend_circle TcuState/off",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "OFF",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "lock"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.icon",
                "version": 0,
                "props": {
                  "path": "material/lock",
                  "color": "#FF0000"
                },
                "meta": {
                  "name": "icon"
                },
                "position": {
                  "basis": "24px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "LOCKED",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "stop"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.icon",
                "version": 0,
                "props": {
                  "path": "material/warning",
                  "color": "#FF0000"
                },
                "meta": {
                  "name": "icon"
                },
                "position": {
                  "basis": "24px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "EMERGENCY STOP",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          }
        ],
        "propConfig": {
          "position.display": {
            "binding": {
              "config": {
                "expression": "!{session.custom.display_safepos}"
              },
              "type": "expr"
            }
          }
        }
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "wrap": "wrap",
          "justify": "flex-end",
          "alignItems": "center"
        },
        "meta": {
          "name": "safepos_container"
        },
        "position": {
          "grow": 1
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "neutral"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/legend_circle TcuState/neutral",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "NEUTRAL",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "wind"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/legend_circle TcuState/wind",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "WIND",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "snow"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/legend_circle TcuState/snow",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "SNOW",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "clean"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "style": {
                    "classes": "TcuState/cleaning TcuState/legend_circle",
                    "height": "20px"
                  }
                },
                "meta": {
                  "name": "logo"
                },
                "position": {
                  "basis": "20px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "CLEANING",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "lock"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.icon",
                "version": 0,
                "props": {
                  "path": "material/lock",
                  "color": "#FF0000"
                },
                "meta": {
                  "name": "icon"
                },
                "position": {
                  "basis": "24px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "LOCKED",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "gap": "5px"
              }
            },
            "meta": {
              "name": "stop"
            },
            "position": {
              "shrink": 0,
              "basis": "120px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.icon",
                "version": 0,
                "props": {
                  "path": "material/warning",
                  "color": "#FF0000"
                },
                "meta": {
                  "name": "icon"
                },
                "position": {
                  "basis": "24px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "EMERGENCY STOP",
                  "style": {
                    "classes": "Text/label_medium"
                  }
                },
                "meta": {
                  "name": "label"
                },
                "position": {},
                "custom": {}
              }
            ]
          }
        ],
        "propConfig": {
          "position.display": {
            "binding": {
              "config": {
                "path": "session.custom.display_safepos"
              },
              "type": "property"
            }
          }
        }
      }
    ]
  }
]

[victordcq]

its probably the icons

[BUG] Perspective flex "auto" not behaving as expected with icon and svg

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 …

[pascal.fragnoud]

I just tried to put a width and height on the icons, it didn’t fix anything.

[victordcq]

The json you pasted does not have 200 basis set for the width of the stop
The middle container gets bigger when one of the texts wraps, and since you are using flex containers this does make the parent bigger too.
It seems you are using two containers that display based on the switch, can you check if the other container is nto bigger?

[pascal.fragnoud]

They're both the same size, with the same behavior concerning the wrap/nowrap thing.

I've set 120px as basis for all of them, same thing.

@victordcq

The middle container gets bigger when one of the texts wraps

But that's the thing: The parent container gets bigger even when there's no wrapping going on. Simply setting the property to 'wrap' makes the parent bigger, even when the middle one stays the same.

You can see the middle container is still the same size, but the parent has grown...

[victordcq]

at 120px basis for me the last one wraps…

yes its wrapping, you are using gaps, check it in the browsers, the middle container is not the same size if the stop wraps

[pascal.fragnoud]

Indeed it’s not the same size if the stop wraps: It’s smaller !

200px basis for the last one, the individual container doesn’t wrap anymore, but the parent gets even bigger:

setting the middle container to nowrap, with the stop container still wrapping, I get the size I want on the parent container:

Now I need to get that size with the middle container wrapping

[victordcq]

does this also happen in the browser?

[pascal.fragnoud]

Yes, same thing in the browser.

Note that the ‘mode’ middle container now gets bigger than the ‘safepos’ one, with the same configuration… And it has less elements in it.

It seems the wider the middle container needs to be, the smaller the parent container gets. I’m confused as hell.

[victordcq]

i’ll give it another look tmw,

[pascal.fragnoud]

I just tried setting some of the small containers display to false, and the parent container changes every time. Sometimes it gets bigger, sometimes it gets smaller, and I can’t figure out any logic behind this…

edit: It seems it’s the biggest with 4 elements in the middle container…

[victordcq]

Im not having that issue

could you create a view with a couple of duplicates of your component each with different settings that have this behaviour?

[pascal.fragnoud]

It doesn’t seem to be doing the same thing when I paste it in another view… with the same settings.
This is getting more and more confusing.

Wait, it actually does. The container that contains all of this is also set to wrap, and changing this also alters the behavior - the test view I put everything in and that doesn’t have the same issue was set to nowrap. Making it wrap re-introduced the issue.

edit: yep, setting the parent’s parent container to nowrap fixes the issue.

[victordcq]

Ah yes i see it too now, this seems to be a “bug/feature” in google chrome.
In firefox this does not seem to happen

css - Why do Chrome and Firefox show different flex layout results? - Code...

[pascal.fragnoud]

I’m pretty sure my darkest nightmares are wrapped in a flex container :X

[victordcq]

Yeah, i generaly dont use flex containers that often. People here seem to love them though.