title: boxes set to height: auto not working
body: <p>I need these box divs to expand their height according to the length of each one's content. Height: auto seems like the solution according to what I've read here, but for whatever reason that property is not currently accounting for the text div I have in each box. The text divs lengthen nicely as the browser window shrinks but it has no effect on the ancestor container.  </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id = "container"&gt;
          &lt;div id="box1" class = "box"&gt;&lt;div id="text1" class="text"&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.&lt;/div&gt;
                  &lt;div id="video1" class="video"&gt; &lt;video loop muted&gt;&lt;source src=assets/IMG_1353.MOV&gt;&lt;/video&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id = "box2" class="box"&gt;
                  &lt;div id="text2" class="text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.&lt;/div&gt;
                  &lt;div id="video2" class="video" &gt; &lt;video loop muted&gt;&lt;source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/&gt;&lt;/video&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id = "box3" class="box"&gt;
              &lt;div id="text3" class="text"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies ac est eu egestas. Etiam egestas elit blandit, mollis magna sit amet, consectetur augue. Aliquam quis elit ac ipsum maximus vestibulum vitae ac purus. Pellentesque vestibulum ante diam, vitae convallis urna tristique eu. Suspendisse potenti. Pellentesque pellentesque enim turpis. Integer efficitur lacinia felis eu sodales. Curabitur vestibulum faucibus sagittis. Aenean ut orci sem. Sed vel nisi pulvinar odio ullamcorper fermentum. Duis diam neque, volutpat id efficitur nec, commodo sit amet enim. Nam porta est eu turpis aliquet cursus. Vivamus tempor nisi sed odio rhoncus viverra. Morbi fermentum vitae risus ut porta. Cras scelerisque diam nisi, sed interdum lorem ullamcorper nec. Pellentesque auctor justo non tortor cursus, faucibus consequat ipsum mollis. Cras dui magna, volutpat sed nibh a, fringilla condimentum felis. Quisque facilisis, enim et feugiat eleifend, mauris nisi pulvinar massa, et sodales risus sem et mauris. Sed lacus leo, faucibus eget imperdiet in, dapibus vitae enim.&lt;/div&gt;
          &lt;div id="video2" class="video" &gt; &lt;video loop muted&gt;&lt;source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"/&gt;&lt;/video&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $(".box").children(".video").click(function () {
          $(this).siblings(".text").toggleClass("toggle");
          $(this).toggleClass("toggle");
      });
      $(".box").children(".text").click(function() {
          $(this).siblings(".video").toggleClass("toggle");
          $(this).toggleClass("toggle");
      });
  });
  &lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function () {
      $(".video").hover(function () {
          $(this).children("video")[0].play();
      }, function () {
          var el = $(this).children("video")[0];
          el.pause();
      });
  });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
      position: relative;
      margin: 10%;
  }
  
  .box {
      position: relative;
      display: inline-block
  }
  
  #box1 {
      border: solid 1px;
      position: relative;
      width: 100%;
      height: auto;
      padding: 5%;
  }
  
  #box2 {
      border: solid 1px;
      position: relative;
      width: 100%;
      height: auto; 
      padding: 5%;
  }
  
  #box3 {
      border: solid 1px;
      position: relative;
      width: 100%;
      height: auto;
      padding: 5%;
  }
  .text {
      display: block;
      position: absolute;
      font: .9em courier;
      line-height: 160%;
      padding: 20px;
      border: 1px dashed black;
      color: rgba(0,0,0, .2)
  }
  
  .video {
      display: block;
      padding: 3px;
      border: 1px solid blue;
  }
  
  video {
      display: block;
      height: auto;
      width: 100%;
  }
  
  .toggle.video {
      border: 1px dashed;
  }
  
  .toggle &gt; video {
      opacity: .05;
  }
  
  .toggle.text {
      border: 1px solid blue;
      color: rgba(0,0,0, 1)
  }
  </code></pre>