Контент ScrollView с динамическим размером

Question

У меня есть ScrollView и контент с динамическим размером.Когда размер контента увеличивается, контент выходит за пределы ScrollView.Кто-нибудь знает, как я могу это исправить?Спасибо.

GIF: https://s3.gifyu.com/images/stackoverflow1.gif

Я пытался установить положение, рамку и другие параметры, но ничего не работает.

HomeView:

struct HomeView: View {
    var categories:[Category] = categoriesData

    var body: some View {
        NavigationView {
            ScrollView(showsIndicators: true) {
                HStack(alignment: .top, spacing: 15) {
                    VStack(spacing: 10) {
                        ForEach (categories) { category in
                            CategoryItem(category: category, subcategories: category.subcategories)
                        }
                    }
                    .padding()
                }
            }
            .navigationBarTitle(Text("TestApp"))

        }
    }
}

CategoryItem:

struct CategoryItem: View {
    var category:Category
    var subcategories:[Subcategory]

    @State private var showSubcategories = false

    var body: some View {
        let tap = TapGesture()
        .onEnded { _ in
            withAnimation {
                self.showSubcategories.toggle()
            }
        }

        var animation: Animation {
            Animation.spring(dampingFraction: 0.5)
                .speed(2)

        }

        return VStack(alignment: .leading) {
            ZStack(alignment: Alignment.bottom) {

                Rectangle()
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: Alignment.topLeading)
                    .foregroundColor(Color.clear)
                    .background(
                        LinearGradient(gradient:
                            Gradient(colors: [.red, Color(redColor.lighter(by: 10)!)]),
                                       startPoint: .topLeading,
                                       endPoint: .bottomTrailing
                        )
                    )
                    .cornerRadius(CGFloat(10))
                HStack(alignment: .top) {
                    Text(category.name)
                    .foregroundColor(.white)
                    .font(.headline)
                    .bold()

                    Spacer()
                }
                .padding()
            }
            .frame(height: CGFloat(100.0))
            .gesture(tap)


            if showSubcategories {
                ZStack(alignment: .bottomLeading) {
                    Rectangle()
                        .fill(Color.white)
                        .cornerRadius(10)
                        .shadow(radius: 10)

                    VStack {
                        ForEach(subcategories) { subcategory in
                                    SubcategoryItem(subcategory: subcategory)
                                    if(subcategory != self.subcategories.last) {
                                        Divider()
                                    }
                        }
                    }
                    .padding(15)
                }
                .padding(EdgeInsets(top: -20, leading: 15, bottom: 0, trailing: 15))
                .transition(.moveAndFade)
            }
        }
        .frame(alignment: .top)
    }
}