After position: fixed, another container takes 100% of browser instead of an available space

Question

I want to create a left navigation bar with the position: fixed attribute so that it stands in place as we scroll down.

I have .fullPage div with display: flex to show these divs horizontally.

When I add position: fixed attribute to the left-navbar, second div container-fluid-center takes 100% of browser's width instead of 100% of available space.

<div class="fullPage">
    <div class="left-navbar">
                
    </div>
    <div class="container-fluid-center">
                
    </div>
</div>

.fullPage {
  width: 100%;
  height: 100%;
  position: relative;
}
.fullPage .left-navbar {
  width: 88px;
  height: 100vh;
  background: #fff;
  border-right: 1px solid #e4e4e4;
  position: fixed;
}
.fullPage .container-fluid-center {
  width: 100%;
  height: 100vh;
}

Answer 1

As per MDN documentation, with position set to fixed "The element is removed from the normal document flow, and no space is created for the element in the page layout.".

In order to fix your issue, you can give to .container-fluid-center a margin-left: 88px;, so that it will not "overlap" with .left-navbar

Answer 2

When you give position:fixed to the .left-navbar

A position:fixed element does not leave a gap in the page where it would normally have been located.

So You need to .fullPage .container-fluid-center give width like this

.fullPage .container-fluid-center {
  width: calc(100% - 88px);
  height: 100vh;
}

So it is worked as you need