title: Scrollable Modal where the X stays top left of the Modal
body: <p>Trying to make a Y scrollable modal. Its width is not set, it may be narrow on wide screens, or most of the screen width on small screens. I wish to have a X top right for closing the Modal, that even if the user scolls down a few pages of the modal (because the modal is long), they don't have to scoll back up to close the modal.</p>
  <p>Because of the changing modal width one can't just simply say right: 123px, or 10%.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;ModalBlur&quot;&gt;
    &lt;div class=&quot;Modal&quot;&gt;
      &lt;div class=&quot;close&quot;&gt;X&lt;/div&gt;
      &lt;div&gt;This modal is different widths.
      &lt;br&gt;Depending on the screen.
      &lt;br&gt;you view it on.
      &lt;br&gt;It may
      &lt;br&gt;get so long
      &lt;br&gt;you have to scroll.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.ModalBlur {
      z-index: 10;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #00000040;
      overscroll-behavior: contain;
  }
  
  .Modal {
    position: relative;
    background: white;  
    padding: 16px;
      margin: 16px;
      max-height: calc(100vh - 124px);
      overflow-y: auto;
      overscroll-behavior: contain;
  }
  
  .close {
    float: right;
    color: red;
    font-size: 48px;
    position: fixed;
  }
  </code></pre>
  <p>Current result:
  <a href="https://i.stack.imgur.com/lPSdj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lPSdj.png" alt="enter image description here" /></a></p>
  <p>Desired the X to be top right, something like below. Even if the modal is very long and one has to scroww Y.
  <a href="https://i.stack.imgur.com/sQFH3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sQFH3.png" alt="enter image description here" /></a></p>