> For the complete documentation index, see [llms.txt](https://docs.flatredball.com/gum/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flatredball.com/gum/code/controls/scrollviewer/bottom-to-top-stacking.md).

# Bottom-to-Top Stacking

## Introduction

By default a ScrollViewer stacks its top-to-bottom. We can modify stack panel to support bottom-up stacking, such as if used for a chat display or console-style output.

## Creating the Layout

The ScrollViewer's inner pane, obtained through the name "InnerPanelInstance" stacks its children top-to-bottom by default. Furthermore, then panel expands in response to its children.

The following visualization shows the size of a panel as children are added with a red rectangle:

<figure><img src="/files/RNXfM7dLc79snB10a3KJ" alt=""><figcaption><p>Red rectangle shows the size of the inner panel</p></figcaption></figure>

We want to make the following modifications to our panel:

1. If the inner panel is smaller than the entire ScrollViewer, then the inner panel should fill the entire ScrollViewer vertically
2. All children in the inner panel should be bottom-aligned rather than top-aligned

We will follow a similar pattern to the Bottom-Up Stack example. Specifically we will create another panel that we can place inside the inner panel, and this bottom-up panel will be docked to the bottom.

The following code shows how to achieve this:

```csharp
ScrollViewer scrollViewer;

protected override void Initialize()
{
    GumUI.Initialize(this);


    var panel = new StackPanel();
    panel.AddToRoot();
    panel.Anchor(Anchor.Center);

    // wrapped ScrollViewer
    scrollViewer = new ScrollViewer();
    panel.AddChild(scrollViewer);
    scrollViewer.Width = 400;
    var innerPanel = scrollViewer.GetVisual("InnerPanelInstance");

    var bottomAlignedContainer = new ContainerRuntime();
    innerPanel.AddChild(bottomAlignedContainer);
    bottomAlignedContainer.Dock(Dock.Bottom);
    bottomAlignedContainer.Height = 0;
    bottomAlignedContainer.HeightUnits = Gum.DataTypes.DimensionUnitType.RelativeToChildren;
    bottomAlignedContainer.ChildrenLayout = Gum.Managers.ChildrenLayout.TopToBottomStack;

    var button = new Button();
    panel.AddChild(button);
    button.Text = "Add Label";
    button.Click += (sender, args) =>
    {
        var label = new Label();
        bottomAlignedContainer.AddChild(label);
        label.Text = $"Added at " + DateTime.Now.ToString("hh:mm:ss.ff");
        FillAndExpandVertically(innerPanel);
        scrollViewer.ScrollToBottom();
    };
}

void FillAndExpandVertically(GraphicalUiElement visual)
{
    // let it expand...
    visual.HeightUnits = Gum.DataTypes.DimensionUnitType.RelativeToChildren;

    // then measure:
    if(visual.AbsoluteHeight > visual.Parent.AbsoluteHeight)
    {
        visual.HeightUnits = Gum.DataTypes.DimensionUnitType.RelativeToChildren;
    }
    else
    {
        visual.HeightUnits = Gum.DataTypes.DimensionUnitType.RelativeToParent;
    }
}
```

<figure><img src="/files/3nnEKim6tRSwHmnAOanb" alt=""><figcaption><p>Labels added to a bottom-up stack</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.flatredball.com/gum/code/controls/scrollviewer/bottom-to-top-stacking.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.