---
title: "Flexible Frames"
description: "How to use the frame modifier in SwiftUI with minWidth, idealWidth, maxWidth, minHeight, idealHeight, maxHeight, and alignment parameters."
url: https://www.swiftuifieldguide.com/layout/flexible-frames
markdown_url: https://www.swiftuifieldguide.com/layout/flexible-frames.md
---
> Convenience Markdown export of the HTML page. Interactive samples, diagrams, and visualizations stay on the canonical page.
# Flexible Frames

A flexible frame allows us to specify a minimum, ideal, and maximum value for each dimension. We can think of a frame as a “wrapper” view around its child that can both change the proposal to its child and change the reported size. One the most common usages is using `maxWidth:.infinity` to fill up the available width:

> Pretty-printed code from Simple

```swift
Text("Checkout")
    .frame(maxWidth: .infinity)
    .padding(8)
    .background(Color.accentColor)
```

> Interactive example on HTML page: Simple.

Frames align their content using the `alignment` parameter. The default is `center`. When we combine alignment with `maxWidth:.infinity`, we can push a view to the leading or trailing edge.

> Pretty-printed code from Simple Alignment

```swift
Text("Hello, world")
    .frame(maxWidth: .infinity)
```

> Interactive example on HTML page: Simple Alignment.

We can also use a flexible frame to specify a minimum width. Note that this frame does *not* change the width of the text itself; it only wraps the text in a frame that's at least 150 points wide. If the text is wider than 150 points, the frame will be wider than 150 points as well. The background then becomes the reported size of the frame.

> Pretty-printed code from Min Width

```swift
Text("Hello")
    .padding(16)
    .frame(minWidth: 150)
    .background(Color.accentColor)
```

> Interactive example on HTML page: Min Width.

At first sight, it looks like the frame below accepts the proposed width unconditionally. However, the behavior is a little bit more subtle. For example, in the view below, the text always renders at its ideal size. The frame becomes *at least* the proposed width, but if the proposed width is small enough, it becomes as wide as the content. When the view is narrow enough, we can see it drawing out of bounds.

> Pretty-printed code from Out Of Bounds

```swift
Text("Hello, world")
    .fixedSize()
    .frame(maxWidth: .infinity)
    .border(.red)
    .padding(8)
```

> Interactive example on HTML page: Out Of Bounds.

When we specify a `maxWidth` value, the modifier takes the minimum of the proposed width and the specified value. This clamping behavior happens at two points: both when the frame proposes to its child, and when the frame reports its own size.

If we want to unconditionally accept the proposed width (regardless of the content's width), we can specify a minimum width of `0` and a maximum width of `.infinity`. Note that the red border now always stays within bounds. This behavior [is documented](https://developer.apple.com/documentation/SwiftUI/View/frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)#discussion).

> Pretty-printed code from Accept Proposed

```swift
Text("Hello, world")
    .fixedSize()
    .frame(minWidth: 0, maxWidth: .infinity)
    .border(.red)
    .padding(8)
```

> Interactive example on HTML page: Accept Proposed.

In the following example, our goal is to have a square image that fits inside any proposed size, regardless of the image's underlying aspect ratio. We start with an [aspect ratio](/layout/aspect-ratio) of `1` and `fit`. This means that a square rectangle will always be proposed to its child, the `clipped` modifier. The frame then unconditionally accepts the proposed size. The aspect ratio with the resizable [image](/layout/image) will use the image's size to fill the proposed size. The image draws out of bounds, but the `clipped` modifier takes care of clipping the image to exactly the square aspect ratio.

> Interactive example on HTML page: Aspect.