SwiftUI - Strange Animation - animation

Question

I have an image for a button. Intended result is so that when I click on the button/image, a list of items appear below it. However, for some reason the image itself shrinks upon clicking. How would I prevent the image from shrinking and just having the items populate below the image?
struct HabitGroups: View {
var imageName: String
var textOverlay: String
var listOfHabits: [String]
#Binding var selectedHabitList: [String]
#Binding var enoughHabits: Bool
#State var showHabits = false
var body: some View {
VStack {
Button(action: {
withAnimation {
self.showHabits.toggle()
}
}) {
Image(self.imageName)
.resizable()
.scaledToFit()
.frame(minWidth: 300, minHeight: 100)
.overlay(ImageOverlay(textOverlay: self.textOverlay), alignment: .bottom)
}
.buttonStyle(PlainButtonStyle())
if self.showHabits {
ForEach(self.listOfHabits, id: \.self) { habit in
AddHabitButtons(habit: habit, selectedHabitList: self.$selectedHabitList, enoughHabits: self.$enoughHabits)
}
}
}
}
}
Before Animation
After Animation

Answer 1

You have to many items below image to fit without resizing everything on screen (as you placed everything in on VStack), so image shrinks as it is .resizalbe.
Possible solution would be to embed habits into scroll view, like below
if self.showHabits {
ScrollView { // << here !!
ForEach(self.listOfHabits, id: \.self) { habit in
AddHabitButtons(habit: habit, selectedHabitList: self.$selectedHabitList, enoughHabits: self.$enoughHabits)
}
}
}
another alternate is to make image fixed by height, but in this case shown habits will push it up off screen. However intended behavior is not clear, anyway here it is
.buttonStyle(PlainButtonStyle())
.fixedSize(horizontal: false, vertical: true) // << here !!