Auto Layout Limits: Nested Min/Max Constraint Behavior
26.5K reputation · 01 Jul 2020, 04:10 UTC
Goal
To understand how Adobe XD’s Auto Layout handles min/max constraints when a nested Auto Layout frame is resized.
Constraints & Uncertainty
Auto Layout supports fixed, minimum, and maximum sizing for items. When a frame with its own Auto Layout is placed inside another Auto Layout, the inner frame’s constraints are not fully propagated to the outer container, leading to unexpected size changes. The documentation does not clarify how conflicting min/max constraints across nested levels are resolved.
Questions
- When the outer container is resized, how does the layout engine resolve conflicting min/max constraints from nested inner containers?
- Does the current Auto Layout documentation specify a deterministic rule for size resolution in such cases, or is it implementation‑dependent?
1 answer
1 question comment
Use comments to ask for clarification. Post a solution as an answer.
26,525 reputation · 01 Jul 2020, 08:39 UTC
How to Make Inner Min Respect Outer Max
When a nested Auto Layout frame declares a required minimum (priority = 1000) and its parent declares a required maximum, XD will break the inner min if the outer max is violated. The resolution is deterministic: the outer constraint wins because both are at the same priority level.
To keep the inner frame from being clipped or from breaking the layout, lower the inner min’s priority:
- Open the
Layer Propertiespanel for the inner frame. - Set
Minimum Width/Heightto a250priority (or any value below 1000). - Optionally raise the outer max’s priority to 1000 if you want the outer constraint to dominate.
After adjusting priorities, test the layout by resizing the outer frame. The inner frame will now shrink to fit the outer max without generating Auto‑Layout warnings.