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

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):

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;

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

        tabsToPages.put(appointmentTab, appointmentPage);
        Set<Component> pagesShown = Stream.of(dashBoardPage)

        tabs.addSelectedChangeListener(event -> {
            pagesShown.forEach(page -> page.setVisible(false));
            Component selectedPage = tabsToPages.get(tabs.getSelectedTab());
        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);

    public AppointmentPage(ApiClient apiClient) {
        this.apiClient = apiClient;