Make ScrollBox size comply to child size

UE level: beginner

Setup:

I have a horizontal ScrollBox with a UniformGridPanel as the single child. The grid contains 4 (2x2) Buttons as children with padding of 5.

Goal:

I want the Buttons to be always 50x50 (grid of size 120x120 incl. padding) no matter how I strech the ScrollBox. The height of the Scrollbox should size to content (only in Y-axis). When I drag the Scrollbox border in the designer too far horizontally, it should stop at or snap back to the max grid size of 120. In other words, if the boundary of the ScrollBox is larger than the one of the Grid, it should size to content.
The final goal is to have a custom UserWidget where I can set number of rows/columns and the size of the buttons which then generates the Buttons with the behavior from above in the designer.

Current Behavior:

I can manage to fixate the Button width but the height keeps changing (>50 in image below) when I drag the ScrollBox’s border. The scrollbar is larger than the child content when the ScrollBox border is larger then the child content (orange area in image below). I read that the SizeBox should be able to fixate the size of a child but nothing worked so far. I tried to set these sizes in my blueprint with ForceLayoutPrepass and setting the MaxDesiredWidth of the siye Box which didn’t work either.

323532-scrollview.png

323531-scrollview-tree.png

Question:

  1. Is this kind of behavior even possible?
  2. if yes: what kind of hierarchy do I need and do I need a combination of blueprint and c++ to achieve this?
  3. if no: what is the closest I can do to achieve this? Do I have to precalculate these values myself and set them manually in the parent?
  4. Is it possible to achieve a “size to content” only for the height instead of both dimensions?