Wraps Children





Wraps Children and Width Units


Relative to Children and Max Width and Max Height

Last updated
Was this helpful?
The Wraps Children property controls whether children wrap or stack beyond their container's boundaries when the container's Children Layout is set to Top to Bottom Stack or Left to Right Stack.

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

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

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

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

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.

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.

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

Last updated
Was this helpful?
Was this helpful?

