Grid area not reducing its width even by using fr-CodePudding

Here, I have a red container, yellow container, and a navbar component.

When the navbar component(blue) is present, I want to reduce the width of both the red and yellow container so that it doesn't overlap.

I tried using fr so that red and blue container takes only the available space but it doesn't seem to work.

.flexrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.pagetoplayout {
  display: grid;
  flex-grow: 1;
  grid-template-columns: 70fr 30fr;
  grid-template-rows: auto auto;
  overflow: auto;
  grid-template-areas:
  'tophalf tophalf'
  'bottomside bottomside';

}

.tophalf{
grid-area: tophalf;
 background: red;
}

.bookingside {
  grid-area: bottomside;
 background: yellow;
}


 .navbar--visible  {
    width: 500px;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
      background-color: var(--color-black);
  overflow: auto;
  padding: 30px 20px;
  opacity: 1;
  background: blue;
  opacity:0.8;
  }

<div >
<div >
<div >Container 1</div>
<div >Container 2 </div>





</div>
<div >
asa

</div>
<div>

CodePudding user response：

Your navbar(blue) has position: absolute; applied which removes it from layout calculations. That's the reason it is shown over top of the other elements and doesn't affect the layout.