title: Expand a div's width dynamically to content once div height has reached the max-height
body: <p>I have a class of <code>div</code>s that I need to dynamically change the width of in case the <code>div</code> grows beyond the <code>height</code> of the <code>max-height</code> of <code>120px</code>. The reason it needs to grow dynamically is that I'm <code>append</code>ing text content to the <code>div</code> and sometimes there is too much text to fit. </p>
  
  <p>Right now, the div appears as follows: 
  <strong>HTML</strong></p>
  
  <pre><code>&lt;div class="arrow_box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.arrow_box{
    width:320px;
    max-height:120px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var timelineSentences = ["OjVIQgtdei NFrqcgRKpy orPfulDVcs eisVloPqXC wfSFifDQqK ghPZyeNKJE wryCLNvlQp pOErunxEtg FyZlcZxkhl xfNSVRuymx HxKxiRTYza AnyUKcgKNO gsYuTscCvx VjIphTkFSc LxmDDASiuI HbWLNJpsVC tTtmBMJsHd asXCGlFqxS vBGpsVkgtN gCPTSKWzog dsAZwIwPbC pWZanKGAFZ dielrXJNMb LZqwCdRtIT viqdgYHGfp PUxhrwKfkG MaiiJUYFOo cfAXxiHTNB TxOqTtxvmg gzmKznNrJF"]
  
  $('.arrow_box').append('&lt;p  style="margin-bottom:0;padding:10px;"&gt;'+timelineSentences[0]+'&lt;/p&gt;');
  </code></pre>
  
  <p>I saw a couple of related posts <a href="https://stackoverflow.com/questions/6296793/change-a-divs-height-to-auto-using-jquery-once-the-div-reaches-a-certain-height">A</a> <a href="https://stackoverflow.com/questions/30149412/make-content-force-div-grow-vertically-until-max-height-is-reached-and-then-gro">B</a> but couldn't derive an answer from them after a number of attempts to adjust the <code>scrollHeight</code></p>