# How the relative size modifier interacts with stack views

DevFeed: [How the relative size modifier interacts with stack views](<https://devfeed.tech/articles/how-the-relative-size-modifier-interacts-with-stack-views-21722.md>)

Original publisher: [Read original article](<https://oleb.net/2023/swiftui-relative-size-in-stacks/>)

Author: Ole Begemann

Published: 2023-03-24T20:14:49Z

Content type: tutorial

Language: en

Sources: [Ole Begemann](<https://devfeed.tech/sources/ole-begemann.md>)

Topics: [SwiftUI](<https://devfeed.tech/topics/swiftui.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [code](<https://devfeed.tech/tags/code.md>), [swiftui](<https://devfeed.tech/tags/swiftui.md>)

## AI overview

The article explains how a relative sizing modifier behaves when applied to views inside SwiftUI HStacks. Because the stack proposes space to children sequentially, the modifier can produce uneven widths depending on which child uses it. It also notes that SwiftUI's built-in containerRelativeFrame modifier behaves differently.

## Source excerpt

And what it can teach us about SwiftUI's stack layout algorithm I have one more thing to say on the relative sizing view modifier from my previous post, Working with percentages in SwiftUI layout. I'm assuming you've read that article. The following is good to know if you want to use the modifier in your own code, but I hope you'll also learn some general tidbits about SwiftUI's layout algorithm for HStacks and VStacks. Using relative sizing inside a stack view Let's apply the relativeProposed modifier to one of the subviews of an HStack: HStack(spacing: 10) { Color.blue .relativeProposed(width: 0.5) Color.green Color.yellow } .border(.primary) .frame(height: 80) What do you expect to happen here? Will the blue view take up 50 % of the available width? The answer is no. In fact, the blue rectangle becomes narrower than the others: This is because the HStack only proposes a proportion of its available width to each of its children. Here, the stack proposes one third of the available space to its first child, the relative sizing modifier. The modifier then halves this value, resulting in one sixth of the total width (minus spacing) for the blue color. The other two rectangles then become wider than one third because the first child view didn't use up its full proposed width. Update May 1, 2024: SwiftUI's built-in containerRelativeFrame modifier (introduced after I wrote my modifier) doesn't exhibit this behavior because it uses the size of the nearest container view as its reference, and stack views don't count as containers in this context (which I find somewhat unintuitive, but that's the way it is). Order matters Now let's move the modifier to the green color in the middle: HStack(spacing: 10) { Color.blue Color.green .relativeProposed(width: 0.5) Color.yellow } Naively, I'd expect an equivalent result: the green rectangle should become 100 pt wide, and blue and yellow should be 250 pt each. But that's not what happens -- the yellow view ends up being wider than the