title: Resize Popup to Content - CSS
body: <p>I'm trying to create this floating modal popup that sits in the top right-hand corner of the screen. I want the background to be active (as in I can do things normally on the webpage without the popup bothering it.</p>
  
  <p>The problem arises when I want to resize the modal to the content on the inside. So for example, if I were to write a paragraph inside that popup, it would automatically resize the modal to contain that text. Preferably I want the width to be constant but I want it to extend downward depending on the text.</p>
  
  <p>Here's what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    // Get the modal
      var modal = document.getElementById('myModal');
  
      // Get the button that opens the modal
      var btn = document.getElementById("myBtn");
  
      // Get the &lt;span&gt; element that closes the modal
      var span = document.getElementsByClassName("close")[0];
  
      // When the user clicks the button, open the modal
      btn.onclick = function() {
          modal.style.display = "inline-block";
      }
  
      // When the user clicks on &lt;span&gt; (x), close the modal
      span.onclick = function() {
          modal.style.display = "none";
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>            /* The Modal (background) */
              .modal {
                  display: none; /* Hidden by default */
                  position: fixed; /* Stay in place */
                  z-index: 1; /* Sit on top */
                  right: 0;
                  top: 0;
                  width: 50%; /* Full width */
                  height: 50px; /* Full height */
                  overflow: auto; /* Enable scroll if needed */
                  background-color: rgb(0,0,0); /* Fallback color */
                  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
              }
  
              /* Modal Content */
              .modal-content {
                  background-color: orange;
                  position: absolute;
                  right: 0px;
                  border: 1px solid #888;
                  width: 100%;
                  height: 100%;
                  margin: auto;
              }
  
              /* The Close Button */
              .close {
                  color: #aaaaaa;
                  float: right;
                  font-size: 28px;
                  font-weight: bold;
              }
  
                  .close:hover,
                  .close:focus {
                      color: #000;
                      text-decoration: none;
                      cursor: pointer;
                  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;h2&gt;Modal Example&lt;/h2&gt;
  
          &lt;!-- Trigger/Open The Modal --&gt;
          &lt;button id="myBtn"&gt;Open Modal&lt;/button&gt;
  
          &lt;!-- The Modal --&gt;
          &lt;div id="myModal" class="modal"&gt;
  
              &lt;!-- Modal content --&gt;
              &lt;div class="modal-content"&gt;
                  &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
                  &lt;p&gt;Some text in the Modal..&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So when the "modal-content" div increases in size due to text, I want the parent div (myModal) to adjust its size accordingly. I can't figure out how to do this. Any ideas?</p>
  
  <p>Thanks!</p>