[![overlapped ui components](https://i.stack.imgur.com/ENh1p.png)](https://i.stack.imgur.com/ENh1p.png)

Hi. As you can see, components are overlapped in a `UIStackView` and I am struggling with that.

Here are some code snippets

```swift
class BottomSheetController: UIViewController {
    lazy var headerLabel: UILabel = {
        let label = UILabel()
        label.text = "Workout"

        return label
    }()

    lazy var header: UIView = {
        let uiView = UIView()
        return uiView
    }()

    lazy var workoutInput: UITextField = {
        let textField = UITextField()

        textField.placeholder = "Find or add option"
        textField.sizeToFit()
        textField.clipsToBounds = true
        textField.backgroundColor = UIColor(red: 65 / 255.0, green: 65 / 255.0, blue: 65 / 255.0, alpha: 0.4)
        textField.layer.cornerRadius = 5

        textField.setImage(image: UIImage(named: "search_black")!)
        textField.setClearTextButton()

        return textField
    }()

    lazy var tagsView: UIScrollView = {
       let scrollView = UIScrollView()
        scrollView.backgroundColor = .red
        return scrollView
    }()

    lazy var containerStackView: UIStackView = {
        let stackView = UIStackView(arrangedSubviews: [header, workoutInput, tagsView])

        stackView.clipsToBounds = true
        stackView.axis = .vertical
        stackView.backgroundColor = .systemGray2

        return stackView
    }()

// ...

 private func setConstraint() {
    header.addSubview(headerLabel)
        header.addSubview(doneButton)

     containerStackView.snp.makeConstraints { make in
            make.top.left.right.bottom.equalToSuperview().inset(20)
        }
        headerLabel.snp.makeConstraints { make in
            make.top.centerX.equalToSuperview()
        }
        doneButton.snp.makeConstraints { make in
            make.top.right.equalToSuperview()
        }
        workoutInput.snp.makeConstraints {make in
            make.height.equalTo(40)
        }
  }
}

```

My problem might be, `header` view doesn't have constant height value

But I don't want to set the magic number to `header` view. But rather assign the value corresponding to child views (`workoutInput`)

1. Is there fancy ways to adjust the height?
2. How to prevent components from overlapping?