Div around a table with overflow-x-auto (bootstrap) but the whole page becomes scroll able

I’m using Blazor, where I have a Component to load a seperate Table (with options to search and use sorting). I have a div around my table with class overflow-x-auto, but it still makes the whole page go out of the screen.

I’ve also tried to set it via style="overflow:scroll;", I have tried it via a seperate class, but nothing seems to make it work.

I do see the css being applied in F12 developer tools.

I feel like im missing something. Can someone take a short look for me and see what im missing?

<div class="row mb-3">
    <!-- Search Box -->
    <div class="col-lg-6 mb-1">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="Search..." @bind="SearchTerm" @oninput="OnSearchInputChanged" />
            <span class="input-group-text">
                <i class="bi bi-search"></i>
            </span>
        </div>
    </div>
    <div class="col-lg-4">
        <select @bind="@SelectedPeriod" class="form-select">
            <option value="" disabled>Select a Period</option>
            @foreach (var period in Periods)
            {
                <option value="@period">@period</option>
            }
        </select>
    </div>
    <div class="col-lg-2">
        <LoadingButton OnClick="async () => await RefreshReport()" InitialButtonText="Refresh" LoadingIcon="true" LoadingButtonText="Loading" w100="true" />
    </div>
</div>

<div class="row mb-3">
    <div class="col-lg-12 text-end">
        <LoadingButton OnClick="DownloadAsFile" InitialButtonText="Download" LoadingIcon="true" LoadingButtonText="Loading" ButtonStyle="btn-success" />
    </div>
</div>
@if (FilteredData != null)
{
    <div class="row mt-3">
        <div class="col-lg-12 text-start">
            <span>@(FilteredData?.Count() ?? 0) @(FilteredData?.Count() == 1 ? "row found" : "rows found")</span>
        </div>
    </div>
}
<div class="table-responsive overflow-x-auto">
    <table class="table table-hover table-sm">
        <thead>
            <tr>
                @foreach (var header in ColumnHeaders)
                {
                    if (!ExcludedColumns.Contains(header))
                    {
                        <th class="sortable-header">
                            <span style="display: inline-block;">@header</span>
                            <svg class="icon" width="16" height="16" style="display: inline-block;">
                                <use href="#fluent--arrow-sort-24-regular"></use>
                            </svg>
                        </th>
                    }
                }
            </tr>
        </thead>
        <tbody>
            @foreach (var row in FilteredData)
            {
                <tr>
                    @foreach (var header in ColumnHeaders)
                    {
                        if (!ExcludedColumns.Contains(header))
                        {
                            <td>@row[header]</td>
                        }
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

EDIT: The table becomes scrollable as soon as a smaller screen is used.

You need to sign in to view this answers