Bootstrap 4 position fixed with width inherit not

I have content and sidebar:

.border {
   border: 1px solid black;
}

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <div id="app">
       <div class="container">
           <div class="row">
              <div class="col-md-7 col-lg-9 border">
                <div class="content">
                  .....
                  </div>
              </div>
              <div class="col-md-5 col-lg-3 border position-relative">
                 <div class="position-fixed border" style="    width: inherit;">
                   ....
                 </div>
              
              </div>
           </div>
           
       </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

In this example width of element position-fixed is not inherit of parent element. Why? I need get inherit width of parent element. If I set width: 20% then width is working on position fixed, but why width inherit is not working?

It's working fine but you need to note that position:fixed has its width relative to the viewport. So if you set 20% to the parent, the fixed element will inherit 20% and will not inherit the calculated pixel value of its parent element width.

So both element will have 20% but not both of them have the same reference for the percentage (i.e. not both of them have the same containing block)

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. ^ref

... However, for some properties (those where percentages are relative to something that may require layout to determine, such as width, margin-right, text-indent, and top), percentage-specified values turn into percentage-computed values. ^ref

Here is a basic example to illustrate:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
  left:0;
}

body {
  padding:0 100px;
}

<div class="box">
  <div></div>
</div>

In the below example, both element are having width:100%. The fixed element is having 100% width of the viewport while the static element is having 100% of the body width minus padding.

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. The containing block of an element is defined as follows:

...

For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest block container ancestor box.

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media or the page area in the case of paged media. ^ref

Another thing to note is that you are not setting any left value in your code which is confusing and will make your think the width of the fixed element isn't correct but you are simply having an overflow.

Here is the pervious code without left:

.box {
  border:2px solid red;
  min-height:50px;
  width:100%;
}
.box > div {
  position:fixed;
  width:inherit;
  min-height:50px;
  border:2px solid green;
}

body {
  padding-left:100px;
}