title: child div with position fixed should have same width as parent div with position relative
body: <p>I’d like to have a div's position fixed after scrolling. But when I change the position to <code>fixed</code> the div goes out of it’s container.
  The div with the class <code>fixed</code> should be just as wide as the div with the class <code>relative</code>. The width of the parent div is dynamic. Only the max-width is known. No position sticky should be used.</p>
  <p>I'm trying to achieve the following:
  When you click a button, a form opens. the form should be fixed.</p>
  <p><a href="https://i.stack.imgur.com/fEdiL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fEdiL.png" alt="sticky" /></a></p>
  <p>There are already some threads on this topic. However, the solutions didn't work for me.
  It can also be solved with JS (but no JQuery).</p>
  <p><a href="https://stackoverflow.com/questions/5873565/set-width-of-a-position-fixed-div-relative-to-parent-div">Set width of a &quot;Position: fixed&quot; div relative to parent div</a></p>
  <p><a href="https://stackoverflow.com/questions/25999846/set-width-of-fixed-positioned-div-relative-to-his-parent-having-max-width">Set width of fixed positioned div relative to his parent having max-width</a></p>
  <p>The following solutions didn't work for me:</p>
  <ul>
  <li>width: inherit</li>
  <li>max-width: inherit</li>
  <li>width: 100%</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.relative {
    position: relative;
    background-color: red;
    max-width: 1200px;
    height: 150vh;
  }
  
  .absolute {
    position: absolute;
    background-color: blue;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: inherit;
  }
  
  .fixed{
    position: fixed;
    background-color: green;
    height: 50px;
    width: inherit;
    z-index: 5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="relative"&gt;
    &lt;div class="absolute"&gt;
      &lt;form class="fixed"&gt;&lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>