title: How to get CSS div to fit contents
body: <p>This is my first post, I have a problem shown below: since I am offsetting the 3 images by -172px to the right and have the position set as absolute I get these scroll bars when the content doesn't fit. I set the &quot;home&quot; section with h-screen but it only works if everything that needs to be show fits in the screen.</p>
  <p>I want to remove the h-screen and just have the &quot;home&quot; section automatically fit everything.</p>
  <p>How do I do that?</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-css lang-css prettyprint-override"><code>.hero-img {
  
      width: 100%;
      height: auto;
  }
  
  .img-container {
      max-width:345px;
      max-height:580px;
  }
  
  .inner{
      position: absolute;
      right: -172px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/&gt;
  
  &lt;section id="home" class="main lg:pl-28 flex flex-wrap flex-row w-full h-screen"&gt;
              &lt;div class="flex flex-col w-full lg:w-5/12 justify-center lg:pr-28 bg-green-200"&gt;
                  &lt;p class="text-lg mb-0 text-gray-600"&gt;Title 1&lt;/p&gt;
                  &lt;h1 class="mb-4 text-3xl md:text-5xl font-bold leading-tight text-center md:text-left slide-in-bottom-h1"&gt;Title 2&lt;/h1&gt;
                  &lt;p class="leading-normal text-base md:text-2xl mb-8 text-center md:text-left slide-in-bottom-subtitle"&gt;Title 3&lt;/p&gt;
              &lt;/div&gt;
              
              &lt;!--Right Col--&gt;
              &lt;div class="outer w-full lg:w-7/12 overflow-x-hidden relative flex items-center bg-red-200"&gt;
                  &lt;div class="flex gap-4 inner"&gt;
                      &lt;div class="flex-initial img-container"&gt;
                          &lt;img src="https://via.placeholder.com/345x580" class="hero-img"&gt;
                      &lt;/div&gt;
                      &lt;div class="flex-initial img-container"&gt;
              &lt;img src="https://via.placeholder.com/345x580" class="hero-img"&gt;
                      &lt;/div&gt;
                      &lt;div class="flex-initial img-container"&gt;
                          &lt;img src="https://via.placeholder.com/345x580" class="hero-img"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>