I can't set my grid's size/it doesn't show up

Flow
1

Hey there,
I have a problem which has left me frustrated now for a very long time. I have an app that consists of the main page and other pages/tabs. Here’s a screen:

And I want to include the grid of all reservations/appointments in the Appointment page. The problem is, the grid has no width if I don’t add anything besides the grid in the layout:

I’ve tried numerous times to set the page’s size, main page’s size, figure out a hierarchy of these components and I can’t crack it.

Here’s my code for the main view (I won’t include non-essential lines of other pages):

@org.springframework.stereotype.Component
@Route
@UIScope
public class MainView extends VerticalLayout {
    private final AppointmentPage appointmentPage;
    private HorizontalLayout mainHorizontal = new HorizontalLayout();
    private Tab appointmentTab = new Tab("Appointments");
    private Map<Tab, Component> tabsToPages = new HashMap<>();
    private Tabs tabs = new Tabs(dashBoardTab, appointmentTab, doctorsTab, settingsTab);
    private Div pages;

    @Autowired
    public MainView (DoctorsPage doctorsPage, AppointmentPage appointmentPage) {
        this.doctorsPage = doctorsPage;
        this.appointmentPage = appointmentPage;
        this.pages = new Div(dashBoardPage, appointmentPage, doctorsPage, settingsPage);

        appointmentPage.setVisible(false);
        appointmentTab.setFlexGrow(1);
		
        tabsToPages.put(appointmentTab, appointmentPage);
        Set<Component> pagesShown = Stream.of(dashBoardPage)
                .collect(Collectors.toSet());

        tabs.setWidthFull();
        tabs.addSelectedChangeListener(event -> {
            pagesShown.forEach(page -> page.setVisible(false));
            pagesShown.clear();
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
            selectedPage.setVisible(true);
            pagesShown.add(selectedPage);
        });
        add(mainHorizontal, logo, tabs, pages);

    }
}

And here is the Appointment page:

public class AppointmentPage extends VerticalLayout {
    private ApiClient apiClient;
    private Grid<ReservationDto> listOfReservationsGrid = new Grid<>(ReservationDto.class);

    @Autowired
    public AppointmentPage(ApiClient apiClient) {
        this.apiClient = apiClient;
        add(listOfReservationsGrid);
        setSizeFull();
        listOfReservationsGrid.setItems(apiClient.getReservations());
    }
}