# Scrolling one bottom right flex container among three or four total

**URL:** <https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 7, 2022, 8:18pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471 "2022-06-07T20:18:23Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 7, 2022, 8:18pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/1 "2022-06-07T20:18:23Z")

</div>

I have a header and leftside flex container sets that I want to hold still, while I want to scroll the bottom right flex container up and down through all my machines.  
I am struggling though.  
Right now:

```auto
main view - 1920x2000

root overflow: hidden (if I set it to visible, the whole page will scroll) 
header overflow: hidden
table overflow: visible
leftNav overflow:hidden
bottomRightScrollFlow overflow: scroll

```

root column no dimensions  
header row 33 tall  
leftnav column 450 wide  
bottomRightScrollFlex column 1470 wide

**How do I get only the bottomRightScrollFlex to scroll?**

---

<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:** [June 8, 2022, 6:47am UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/2 "2022-06-08T06:47:11Z")

</div>

Wrap the bottomRightScrollFlow in another container which fits the root and set that wrapper to overflow scroll, while you set bottomRightScrollFlow to overflow visible

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 8, 2022, 1:08pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/3 "2022-06-08T13:08:53Z")

</div>

what do you mean by fits the root?

---

<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:** [June 8, 2022, 2:04pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/4 "2022-06-08T14:04:42Z")

</div>

> [@zacharyw.larson](#):
>
> bottomRightScrollFlex column 1470 wide

**wrapper** : width:1470px, height:100%, overflow:auto  
**bottomRightScrollFlow** : width: 1470px, height:auto, overflow:visible

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 8, 2022, 2:11pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/5 "2022-06-08T14:11:41Z")

</div>

I am doing something wrong.  
I tried this below, but it did not work. There was no scroll.

Does this image help you help me? Do you want the copy of the json?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/2/029af0cb3705f93368f4e2730b1acdf0273471fe.png)

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [June 8, 2022, 2:17pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/6 "2022-06-08T14:17:06Z")

</div>

@victordcq is saying that you need another flex container to wrap what you are calling bottomRightScrollFlow.

The wrapper container, should be set how your current bottomRightScrollFlow is set, so that it “fits” it’s container without a scroll bar.

Then you configure the actual bottomRightScrollFlow differently, as he showed, so that container and only that container will scroll.

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 8, 2022, 2:18pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/7 "2022-06-08T14:18:57Z")

</div>

I thought I did that in the example I show, and it doesn’t work.

Can you check my example?

I think “rightcontentcolumn1502scroll” is set to scroll.  
I think “outerrightcontentcolumn906visible” is set to visible inside the other.  
copied from the root:

```auto
[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {
      "direction": "column",
      "style": {
        "overflow": "visible"
      }
    },
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "overflow": "visible"
          }
        },
        "meta": {
          "name": "header80"
        },
        "position": {
          "shrink": 0,
          "basis": "80px"
        },
        "custom": {}
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {
          "style": {
            "overflow": "visible"
          }
        },
        "meta": {
          "name": "bodyrow840"
        },
        "position": {
          "shrink": 0,
          "basis": "840px"
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "style": {
                "overflow": "visible"
              }
            },
            "meta": {
              "name": "leftnav"
            },
            "position": {
              "shrink": 0,
              "basis": "418px"
            },
            "custom": {}
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column",
              "style": {
                "overflow": "scroll"
              }
            },
            "meta": {
              "name": "rightcontentcolumn1502scroll"
            },
            "position": {
              "shrink": 0,
              "basis": "1502px"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.container.flex",
                "version": 0,
                "props": {
                  "direction": "column",
                  "style": {
                    "overflow": "visible"
                  }
                },
                "meta": {
                  "name": "outerrightcontentcolumn906visible"
                },
                "position": {
                  "shrink": 0,
                  "basis": "906px"
                },
                "custom": {},
                "children": [
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_0"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  },
                  {
                    "type": "ia.container.flex",
                    "version": 0,
                    "props": {
                      "style": {
                        "overflow": "visible"
                      }
                    },
                    "meta": {
                      "name": "rightcontentrow906visible_1"
                    },
                    "position": {
                      "shrink": 0,
                      "basis": "906px"
                    },
                    "custom": {},
                    "children": [
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column",
                          "style": {
                            "overflow": "visible"
                          }
                        },
                        "meta": {
                          "name": "colomnone200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomtwo200vis"
                        },
                        "position": {
                          "basis": "200px"
                        },
                        "custom": {}
                      },
                      {
                        "type": "ia.container.flex",
                        "version": 0,
                        "props": {
                          "direction": "column"
                        },
                        "meta": {
                          "name": "colomnthree200vis"
                        },
                        "position": {
                          "shrink": 0,
                          "basis": "200px"
                        },
                        "custom": {}
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
]

```

---

<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:** [June 8, 2022, 2:20pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/8 "2022-06-08T14:20:26Z")

</div>

might be easier with a coorindate container. i dont really use flexes to often

> **Summary**
>
> ```auto
> {
> "custom": {},
> "params": {},
> "props": {},
> "root": {
> "children": [
> {
> "children": [
> {
> "children": [
> {
> "meta": {
> "name": "Label"
> },
> "position": {
> "basis": "500px"
> },
> "props": {
> "text": "Label"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Label_0"
> },
> "position": {
> "basis": "500px"
> },
> "props": {
> "text": "Label"
> },
> "type": "ia.display.label"
> },
> {
> "meta": {
> "name": "Label_1"
> },
> "position": {
> "basis": "500px"
> },
> "props": {
> "text": "Label"
> },
> "type": "ia.display.label"
> }
> ],
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "height": "auto",
> "width": "100%"
> },
> "props": {
> "direction": "column"
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "ScrollingContainer"
> },
> "position": {
> "grow": 1
> },
> "type": "ia.container.coord"
> },
> {
> "meta": {
> "name": "FlexContainer"
> },
> "position": {
> "basis": "200px"
> },
> "type": "ia.container.flex"
> }
> ],
> "meta": {
> "name": "root"
> },
> "type": "ia.container.flex"
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 8, 2022, 2:21pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/9 "2022-06-08T14:21:17Z")

</div>

where do I paste that? on root?

it doesn’t have the square brackets? does my editor add thsoe?

---

<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:** [June 8, 2022, 2:23pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/10 "2022-06-08T14:23:35Z")

</div>

i copied the whole view sry

```auto
[
  {
    "type": "ia.container.flex",
    "version": 0,
    "props": {},
    "meta": {
      "name": "root"
    },
    "position": {},
    "custom": {},
    "children": [
      {
        "type": "ia.container.coord",
        "version": 0,
        "props": {},
        "meta": {
          "name": "ScrollingContainer"
        },
        "position": {
          "grow": 1
        },
        "custom": {},
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "props": {
              "direction": "column"
            },
            "meta": {
              "name": "FlexContainer"
            },
            "position": {
              "width": "100%",
              "height": "auto"
            },
            "custom": {},
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Label"
                },
                "meta": {
                  "name": "Label"
                },
                "position": {
                  "basis": "500px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Label"
                },
                "meta": {
                  "name": "Label_0"
                },
                "position": {
                  "basis": "500px"
                },
                "custom": {}
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "props": {
                  "text": "Label"
                },
                "meta": {
                  "name": "Label_1"
                },
                "position": {
                  "basis": "500px"
                },
                "custom": {}
              }
            ]
          }
        ]
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "props": {},
        "meta": {
          "name": "FlexContainer"
        },
        "position": {
          "basis": "200px"
        },
        "custom": {}
      }
    ]
  }
]

```

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 8, 2022, 2:25pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/11 "2022-06-08T14:25:03Z")

</div>

I saw one of yours is set to grow, is it the missing part?

---

<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:** [June 8, 2022, 2:27pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/12 "2022-06-08T14:27:18Z")

</div>

your container also has the scroll? i see no problem

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/c/0c12ed12a05c5e662e4774dcc947223ff62d054a.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e73957c660e13544af065fa58e05cf681338ac95.png)

---

<div class="post-metadata">

**Author:** ![zacharyw.larson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zacharyw.larson/32/23749_2.png) [@zacharyw.larson](https://forum.inductiveautomation.com/u/zacharyw.larson)\
**Post date:** [June 8, 2022, 2:28pm UTC](https://forum.inductiveautomation.com/t/scrolling-one-bottom-right-flex-container-among-three-or-four-total/60471/13 "2022-06-08T14:28:44Z")

</div>

I think it works

I will test it more.

I am not sure if grow was the missing part. Thanks so much, I was so lost.

update: Grow might matter.  
When I removed grow, this worked still.  
However, on another page, scrolling did not work till I had set grow to 1 at least once.  
Thanks so much.

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