Blazor Horizontal Scrollbar Issue - css

Question

I am developing an application in Microsoft Blazor and I have a problem with the UI when I am resizing the window.
Normally if the content fits into the window, there is no blank space on the topbar/header:
But when I am shrinking the window and scrolling to the right side, there is blank space:
Seems that even the content of the container "content" is large, header is not stretching...
Here is my MainLayout:
<div class="page">
<Sidebar />
<div class="main">
<Header />
<article class="content px-4">
<AuthorizeView>
<NotAuthorized>
<div class="row">
<div class="col-md-4">
<p>Please sign in to use the Platform...</p>
</div>
</div>
</NotAuthorized>
<Authorized>
#Body
</Authorized>
</AuthorizeView>
</article>
</div>
Here is the css of the Page:
.page {
position: relative;
display: flex;
flex-direction: row;
height: 100vh;
width: 100%;
}
Here is the css of the Main:
.main {
flex: 1;
top: 0px;
left: 0px;
overflow-y: scroll;
}
Here is the css od the Sidebar:
.sidebar {
top: 0px;
left: 0px;
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.sidebar_clp { //Colapsed State
width: 110px;
overflow-x: hidden;
overflow-y: hidden;
}
.sidebar_exp { //Expanded State
width: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
Here is the css of the Header:
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
position: sticky;
top: 0;
z-index: 1;
}
Here is the css of the Content:
.content {
padding-top: 1.1rem;
flex: 1;
top: 0px;
left: 0px;
}
Any ideas how can this be fixed?

Answer 1

After lot of trials, I ended up with this setting:
.top-row {
top: 0;
z-index: 1;
display: flex;
height: 3.5rem;
position: absolute;
align-items: center;
justify-content: flex-end;
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
width: -webkit-fill-available;
}
The lines that are making the difference are:
position: absolute;
width: -webkit-fill-available;