Having trouble setting constraints of 2 views one on top and one on bottom in a custom UITableViewCell

I'm currently trying to have 2 views on top of each other in a CustomCell.

The issue i'm running into is only the top view gets displayed.

Debugging the view it shows that the height for the top view is ambiguous and for the bottom view the height and vertical position is ambiguous.

I'm currently setting the height for these custom cells using the func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat method and setting it to UITableView.automaticDimension and setting the cosntraints using the code below inside the CustomCells layoutSubviews method.

What am I missing?

Thank you

What the tableView with the customCells currently looks like, it should have a greenView and a blackView under the greenView with a space of 10.

CustomTableViewCell

/// Adds it to contentView. This get's called in the `init()`
private func setupUI() {
        setupCellContentView()
        self.contentView.addSubview(topContainerView)
        self.contentView.addSubview(bottomContainerView)
    }

override func layoutSubviews() {
        super.layoutSubviews()

        let topContainerViewViewConstraints = [
            topContainerView.topAnchor.constraint(equalTo: self.contentView.topAnchor, constant: 10),
            topContainerView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 10),
            topContainerView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -10),
        ]
        let bottomContainerViewConstraints = [
            bottomContainerView.topAnchor.constraint(equalTo: topContainerView.bottomAnchor, constant: 10),
            bottomContainerView.leadingAnchor.constraint(equalTo: self.contentView.leadingAnchor, constant: 10),
            bottomContainerView.trailingAnchor.constraint(equalTo: self.contentView.trailingAnchor, constant: -10),
            bottomContainerView.bottomAnchor.constraint(equalTo: self.contentView.bottomAnchor, constant: -10)
        ]

        NSLayoutConstraint.activate(topContainerViewViewConstraints)
        NSLayoutConstraint.activate(bottomContainerViewConstraints)
    }

/// Bottom container view is set up the exact same way as topContainerView.
lazy var topContainerView: UIView = {
        let container = UIView()
        container.translatesAutoresizingMaskIntoConstraints = false
        container.backgroundColor = .green
        return container
}()

TableView

class MainViewController: UIViewController {
private func setupUI() {
        self.edgesForExtendedLayout = []
        self.view.backgroundColor = .none
        self.view.addSubview(contentView)
    }

    private func setupConstraintsForContentView() {
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
            contentView.leadingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor),
            contentView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor),
        ])
    }
}

extension MainViewController: UITableViewDelegate, UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        viewModel.scoresData.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        guard let cell: ScoresTableViewCell = tableView.dequeueReusableCell(withIdentifier: "scoresTableViewCell",
                                                                            for: indexPath) as? ScoresTableViewCell else {
            return UITableViewCell()
        }
        cell.setupCellData(with: viewModel.scoresData[indexPath.row])
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return UITableView.automaticDimension
    }
}

You have not assigned any constraints to either container view that would give either of them any height. The width is unambiguous because the views are pinned to the left and right of the content view, whose width is in turn determined by the table view itself; but the height of the content view is the unknown that the runtime is trying to determine, and you are not giving it any help.

When the top container view is given a height, its height will no longer be ambiguous and its bottom will therefore be known, and in turn the top of the bottom container view will no longer be ambiguous. When the bottom container view is given a height, there will be no further ambiguity and the content view (and hence the cell) will adopt a correct height.

So the information you have gathered from the debugger is correct. The only surprise as far as I'm concerned is that you can see any cell at all!