> 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/gum-tool/gum-elements/container/wraps-children.md).

# Wraps Children

The *Wraps Children* property controls whether children wrap or stack beyond their container's boundaries when the container's [Children Layout](/gum/gum-tool/gum-elements/container/children-layout.md) is set to Top to Bottom Stack or Left to Right Stack.

![Wraps children makes children wrap when using either Top to Bottom Stack or Left to Right Stack.](/files/0qudsimZWGcHnvKgPVOk)

If a parent has Wraps children set to true, the wrapping adjusts in response to resizing the parent.

<figure><img src="/files/dRLSej4f4NeGMOv1Gbc9" alt=""><figcaption><p>Resizing a parent can change wrapping</p></figcaption></figure>

Similarly, resizing a child may result in the stacking changing.

<figure><img src="/files/baPOR0DaBjhAYhqsKUgn" alt=""><figcaption><p>Resizing children can change wrapping</p></figcaption></figure>

The row height in a Left to Right Stack is determined by the largest child in the row.

<figure><img src="/files/gwxig2SIyzWChd1qYR0h" alt=""><figcaption><p>Height of each item in the row determines row height</p></figcaption></figure>

Similarly, column width in a Top to bottom Stack is determined by the largest child in the column.

<figure><img src="/files/YenbHknkGleAqZMpV66U" alt=""><figcaption><p>Width of each item in the column determines column width</p></figcaption></figure>

## Wraps Children and Width Units

Wrapping of children can only be performed if the parent's size does not depend on its children (see more info below). If the parent's size does depend on its children, then the parent will expand to fit is children so wrapping will not occur.

If a parent container's Width Units is set to Relative to Children, then it adjusts in response to children size and positioning, so wrapping will not occur.

<figure><img src="/files/Xs0t3hFtCQbvw2gZ0JHc" alt=""><figcaption><p>Stacking cannot occur if the parent uses a Width Units of Relative To Children</p></figcaption></figure>

A parent can use the following `Width Units` and `Height Units` with children wrapping:

* ✅Absolute
* ✅Percentage of Parent
* ✅Ratio of Parent
* ✅Percentage of Width/Height
* ✅Absolute Multiplied by Font Scale

A parent does not wrap its children if it uses:

* ❌Relative to Children (see below)

Note that Relative to Children can be used on the non-stacking axis. For example, if a parent uses `Left to Right Stack`, then it can still have its `Height Units` set to `Relative to Children`.

<figure><img src="/files/AOJ5iaqanATFHDRMjPEm" alt=""><figcaption><p>Left to Right Stack with Height Units set to Relative to Children</p></figcaption></figure>

## Relative to Children and Max Width and Max Height

If a container has a non-null Max Width, then it will expand according to its children until it reaches its max width. Once it reaches a max width, it wraps its children.

The following animation shows a container which has:

* Width Units of Relative to Children
* Max Width of 400
* Children Layout of Left to Right Stack
* Wraps Children set to True

<figure><img src="/files/MkL64Ay6PDMgR7DehcIq" alt=""><figcaption><p>Wraps Children allowed when max width is set</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:

```
GET https://docs.flatredball.com/gum/gum-tool/gum-elements/container/wraps-children.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
