# Flex wrap enlarges my container (even when not wrapping)

**URL:** <https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162>\
**Category:** Ignition\
**Created:** [July 21, 2022, 1:24pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162 "2022-07-21T13:24:16Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [July 21, 2022, 1:24pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/1 "2022-07-21T13:24:16Z")

</div>

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:

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

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

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

```

and the `parent` properties:

```auto
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:

```auto
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:

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

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 ?

---

<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:** [July 21, 2022, 7:49pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/2 "2022-07-21T19:49:57Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [July 22, 2022, 8:23am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/3 "2022-07-22T08:23:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 10, 2022, 11:22am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/4 "2022-08-10T11:22:10Z")

</div>

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**
>
> ```auto
> [
> {
> "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"
> }
> }
> }
> }
> ]
> }
> ]
> 
> ```

---

<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:** [August 10, 2022, 1:25pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/5 "2022-08-10T13:25:14Z")

</div>

its probably the icons

> [@\[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:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 10, 2022, 1:30pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/6 "2022-08-10T13:30:55Z")

</div>

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

---

<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:** [August 10, 2022, 1:43pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/7 "2022-08-10T13:43:30Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 10, 2022, 2:42pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/8 "2022-08-10T14:42:50Z")

</div>

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.

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

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

---

<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:** [August 10, 2022, 2:45pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/9 "2022-08-10T14:45:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 10, 2022, 2:50pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/10 "2022-08-10T14:50:16Z")

</div>

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:

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

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

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

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

---

<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:** [August 10, 2022, 2:52pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/11 "2022-08-10T14:52:10Z")

</div>

does this also happen in the browser?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 10, 2022, 2:57pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/12 "2022-08-10T14:57:22Z")

</div>

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.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/1/713ec656f3493274f80325c73e099ac42814c60b.png)

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/5/b56ddaca60e9f78630c34ef2b8b573425710a49f.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:** [August 10, 2022, 2:58pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/13 "2022-08-10T14:58:42Z")

</div>

i’ll give it another look tmw,

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 10, 2022, 3:01pm UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/14 "2022-08-10T15:01:15Z")

</div>

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…

---

<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:** [August 11, 2022, 7:21am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/15 "2022-08-11T07:21:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 11, 2022, 7:57am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/16 "2022-08-11T07:57:04Z")

</div>

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.

---

<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:** [August 11, 2022, 8:52am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/17 "2022-08-11T08:52:44Z")

</div>

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...](https://codeutility.org/css-why-do-chrome-and-firefox-show-different-flex-layout-results-stack-overflow/)**
>
> \[ When there is only one row of “flex items”, Chrome and Firefox show different results. When there is more ... Read more

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [August 11, 2022, 9:00am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/18 "2022-08-11T09:00:08Z")

</div>

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

---

<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:** [August 11, 2022, 9:09am UTC](https://forum.inductiveautomation.com/t/flex-wrap-enlarges-my-container-even-when-not-wrapping/62162/19 "2022-08-11T09:09:56Z")

</div>

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