If you use containerRelativeFrame you will always end up occupying the entire view as far as I know.

There are 3 variations to containerRelativeFrame; in this case you want to use the "full custom" variation in which you can fully customize the returned dimensions relative to the container frame

Specifically, make the width of the items in your scroll view equal to the width of your container minus 2 times the padding you are using (similar to the other solution by @MatBuompy). This will allow you to achieve your goals without the need for GeometryReader.

struct CardTheme: View {

  let padding: CGFloat

  var body: some View {
    ScrollView(.horizontal, showsIndicators: false) {
      HStack {
        ForEach(0..<10, id: \.self) { i in
          RoundedRectangle(cornerRadius: 25)
            // Use the pure custom version of `.containerRelativeFrame`
            .containerRelativeFrame(.horizontal) { width, _ in
              width - (self.padding * 2)
            }
          }
        }
      }
      .padding(.horizontal, self.padding)
      .scrollTargetLayout()
    }
    .scrollTargetBehavior(.viewAligned)
  }
}