--- title: "ViewThatFits Vertical | Explore SwiftUI" description: "A view that adapts to the available vertical space by providing the first child view that fits" canonical_url: "https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical" meta: author: "Explore SwiftUI" "og:description": "A view that adapts to the available vertical space by providing the first child view that fits" "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_ViewThatFits%2BVertical%2Cdescription_A%2Bview%2Bthat%2Badapts%2Bto%2Bthe%2Bavailable%2Bvertical%2Bspace%2Bby%2Bproviding%2Bthe%2Bfirst%2Bchild%2Bview%2Bthat%2Bfits.%2Ccategory_ViewThatFits%2Cimage_~L2FwaS9pbWFnZXMvNi92YXJpYW50cy8yMD92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L3ZpZXd0aGF0Zml0cy92aWV3dGhhdGZpdHMtdmVydGljYWwi%2Cs_6SDyA9XMcG3GvqNc.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "ViewThatFits Vertical | Explore SwiftUI" "twitter:description": "A view that adapts to the available vertical space by providing the first child view that fits" "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_ViewThatFits%2BVertical%2Cdescription_A%2Bview%2Bthat%2Badapts%2Bto%2Bthe%2Bavailable%2Bvertical%2Bspace%2Bby%2Bproviding%2Bthe%2Bfirst%2Bchild%2Bview%2Bthat%2Bfits.%2Ccategory_ViewThatFits%2Cimage_~L2FwaS9pbWFnZXMvNi92YXJpYW50cy8yMD92PTE3OTAwNzM0Nzg4NDImcj0yJnc9MTI4MCZxPTg1JmY9anBlZw%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidHZPUyIsInZpc2lvbk9TIl19%2Cp_Ii9saWJyYXJ5L3ZpZXd0aGF0Zml0cy92aWV3dGhhdGZpdHMtdmVydGljYWwi%2Cs_6SDyA9XMcG3GvqNc.png" "twitter:title": "ViewThatFits Vertical | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=6) # **ViewThatFits Vertical** A view that adapts to the available vertical space by providing the first child view that fits. ![ViewThatFits Vertical - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/6/variants/20?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 16.0+ iPadOS 16.0+ macOS 13.0+ watchOS 9.0+ tvOS 16.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs]() ``` var body: some View { VStack(alignment: .leading) { testContent .background(.red) .frame(maxWidth: 200) testContent .background(.red.secondary) .frame(maxHeight: 20) testContent .background(.red.tertiary) .frame(maxHeight: 9) } } @ViewBuilder var testContent: some View { ViewThatFits(in: .vertical) { Text("Size w300 h30") .frame(width: 300, height: 30) .foregroundStyle(.white) Text("Size w200 h20") .frame(width: 200, height: 20) .foregroundStyle(.white) Text("Fallback") .frame(width: 80, height: 10) .foregroundStyle(.white) } } ``` ### **Found an issue or have a suggestion?** Created: May 29, 2025Updated: May 31, 2025 ![Connect Wizard](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More ViewThatFits Components ** [**View all **](https://exploreswiftui.com/library/viewthatfits) ![ViewThatFits - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/5/variants/1?v=1790073478842&r=2&w=412&q=75&f=webp) ### **ViewThatFits** A view that adapts to the available space by providing the first child view that fits. ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Toolbar Title Alignment - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/258/variants/2111?v=1793542963212&r=2&w=412&q=75&f=webp) ### **Toolbar Title Alignment** Sets the preferred alignment of the navigation bar’s title. The navigation bar resolves the alignment of its title automatically based on context, and toolbar roles. Use this modifier to override that resolution. ![Tab View Side Bar Footer - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/168/variants/735?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Tab View Side Bar Footer** Adds a custom footer to the sidebar of a tab view. ![Sheet Size - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/137/variants/432?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Sheet Size** Sets the available detents for the enclosing sheet. ![SidebarAdaptableTabViewStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/158/variants/655?v=1790073478842&r=2&w=412&q=75&f=webp) ### **SidebarAdaptableTabViewStyle** A tab bar style that adapts to each platform. ![Preferred Top Column - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/256/variants/1967?v=1791379474964&r=2&w=412&q=75&f=webp) ### **Preferred Top Column** Controls which column appears on top of the stack when NavigationSplitView collapses into a single stack in certain contexts, such as on iPhone, when iPhone Duo is closed, or on Apple Watch. By default, the sidebar appears on top. In this case, the detail column does instead. ![Default Collapsed Tab Section - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/234/variants/341?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Default Collapsed Tab Section** Sets the default expansion state for the section containing this tab to collapsed when displayed in the sidebar. ![Background Extension Effect - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Background Extension Effect** Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies ![UIKit Content Background colors - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/13/variants/53?v=1790073478842&r=2&w=412&q=75&f=webp) ### **UIKit Content Background colors** The UIKit colors that are also used in other components like in List and GroupBox ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical#webpage","@type":"WebPage","dateModified":"2025-05-31T17:49:54.655Z","datePublished":"2025-05-29T08:17:10.282Z","description":"A view that adapts to the available vertical space by providing the first child view that fits","name":"ViewThatFits Vertical","url":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical","breadcrumb":{"@id":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical#article","dateModified":"2025-05-31T17:49:54.655Z","datePublished":"2025-05-29T08:17:10.282Z","description":"A view that adapts to the available vertical space by providing the first child view that fits","headline":"ViewThatFits Vertical","inLanguage":"en-US","name":"ViewThatFits Vertical","thumbnailUrl":"https://exploreswiftui.com/api/images/6/variants/20?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/viewthatfits/init(in:content:)","codeSampleType":"full example","description":"A view that adapts to the available vertical space by providing the first child view that fits","name":"ViewThatFits Vertical SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"var body: some View {\n VStack(alignment: .leading) {\n testContent\n .background(.red)\n .frame(maxWidth: 200)\n testContent\n .background(.red.secondary)\n .frame(maxHeight: 20)\n testContent\n .background(.red.tertiary)\n .frame(maxHeight: 9)\n }\n}\n\n@ViewBuilder\nvar testContent: some View {\n ViewThatFits(in: .vertical) {\n Text(\"Size w300 h30\")\n .frame(width: 300, height: 30)\n .foregroundStyle(.white)\n Text(\"Size w200 h20\")\n .frame(width: 200, height: 20)\n .foregroundStyle(.white)\n Text(\"Fallback\")\n .frame(width: 80, height: 10)\n .foregroundStyle(.white)\n }\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"ViewThatFits"},{"@type":"Thing","name":"ViewThatFits Vertical"}]},{"@id":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"ViewThatFits","item":"https://exploreswiftui.com/library/viewthatfits","position":2},{"@type":"ListItem","name":"ViewThatFits Vertical","item":"https://exploreswiftui.com/library/viewthatfits/viewthatfits-vertical","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/6/variants/20?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/6/variants/20?v=1790073478842&r=2"}]} ```