# Ignition Perspective Page - Scroll bar vertical if content is longer in height

**URL:** <https://forum.inductiveautomation.com/t/ignition-perspective-page-scroll-bar-vertical-if-content-is-longer-in-height/77499>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 6, 2023, 2:18pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-page-scroll-bar-vertical-if-content-is-longer-in-height/77499 "2023-08-06T14:18:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Babla\_Bogam](https://avatars.discourse-cdn.com/v4/letter/b/ecb155/32.png) [@Babla\_Bogam](https://forum.inductiveautomation.com/u/Babla_Bogam)\
**Post date:** [August 6, 2023, 2:18pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-page-scroll-bar-vertical-if-content-is-longer-in-height/77499/1 "2023-08-06T14:18:56Z")

</div>

I have a view (page) with root (direction set to column). In this root I am adding a bunch of flex containers (each of them are row direction). As I add more flex containers to the root I see the designer compresses each of the flex container to fit on the screen. I see the same effect on the browser as well. I want my view to grow vertically so user can scroll to content vertically. I tried various options like - style (overflow), position(grow), hard coding heights on the individual flex containers with no success except hard coding a very high style.height (like 2000px) on the root. But I don't want to hard code the height. Any suggestions?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 6, 2023, 2:42pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-page-scroll-bar-vertical-if-content-is-longer-in-height/77499/2 "2023-08-06T14:42:19Z")

</div>

- Shift-select all the flex containers in the Project Browser.
- In Property Editor set

```auto
POSITION
    grow : 0
    shrink : 0 <--- the important one!
    basis : 300px <--- or whatever.

```

If you've messed up the root properties then try these:

```auto
PROPS
    direction : column
    wrap : nowrap
    justify : flex-start
    aligItems : stretch
    style
        overflow : auto

```

Play with `position.basis` and see if you can set this to `auto` so that it adopts the dimensions of the flex containers and that you're not setting parameters twice. You should probably then do the same with the flex containers, making sure that `grow : 0` is set.

---

<div class="post-metadata">

**Author:** ![Babla\_Bogam](https://avatars.discourse-cdn.com/v4/letter/b/ecb155/32.png) [@Babla\_Bogam](https://forum.inductiveautomation.com/u/Babla_Bogam)\
**Post date:** [August 6, 2023, 4:16pm UTC](https://forum.inductiveautomation.com/t/ignition-perspective-page-scroll-bar-vertical-if-content-is-longer-in-height/77499/3 "2023-08-06T16:16:26Z")

</div>

Thank you so much. This was very helpful and solved my problem
