Getting my scroll bars in the right place

I have a perspective view set up as follows:

  1. View type is Flex Row. Within the root container is Embedded View 1
  2. Embedded View 1 is a Flex Column view type. Within this view I have two objects:
    1. A header label with a fixed basis, grow and shrink set to 0
    2. A flex column repeater with basis set to auto, grow and shrink set to 0, and elementPosition basis set to auto, grow and shrink set to 0
  3. The flex repeater embeds a series of 6 views. Each view starts as the same size, but contains an accordion-type object to expand and show more detail. Therefore, as more of the views embedded in the flex repeater are expanded, the height of the flex repeater grows

If I open too many of the accordions, the data starts to disappear off the bottom of the screen. I would like scroll bars to appear on the flex repeater only - meaning that all of the other objects on my main view stay put, and the header of Embedded View 1 stays put, and only the flex repeater scrolls up and down to achieve this.

I thought this would be achieved by setting the overflow settings as follows:

  • Main view root container: visible
  • Embedded View 1 (setting in main view): visible
  • Embedded View 1 root container: visible
  • Flex repeater: auto

However, it does not work with the settings I have in place - the embedded view just extends off the bottom of the view and does not display scroll bars.

I can make it work by setting the main view root container’s alignItems setting is to stretch, but that’s not what I want - it creates some visual effects that are less than ideal. I want that setting set to flex-start.

I can make it work by setting a maxHeight for Embedded View 1, but that means my design is no longer dynamic for screens of different sizes.

Is there another trick I can use to make it work the way I want?

Can you supply a screenshot with annotations showing the location you are wanting items to appear?

Apologies for the delay, I have been away from the office.

The embedded view is shown in the attached screenshot. As the different sections are expanded, I want the embedded view to expand vertically to fill all of the available space on the screen. When it reaches the lower boundary of the view, I want it to show a scroll bar on the right hand side, but to scroll the “row x” flex repeater only, and leave the “machine functions” header in place.

If I set the view’s root container alignItems property to stretch, it behaves as I expect, but it also expands the embedded view all the way to the bottom of the view to start with, which looks wrong as it has empty space at the bottom.

If I set alignItems to flex-start it expands and contracts as I wish, but it just runs off the bottom of the view when it exceeds the size of the view, instead of showing scroll bars. If I also add a max-height property to the embedded view, I can make it stop expanding at the bottom of the view and show scroll bars, but then on a larger screen it stops expanding at a seemingly arbitrary point and again looks wrong.