title: Horizontal scroll only if child element's width property exceeds parent element's max-width property
body: <p>I'm wondering how this can be achieved...</p>
  
  <p>I have code similar to the code in this <a href="http://jsfiddle.net/ctwheels/usLgo4go/" rel="nofollow">jsfiddle</a>.</p>
  
  <p>I have an unordered list with a set <code>max-width</code> (inherited from parent) that contains many list items that should have automatic widths. The issue I am having is that when <code>width:auto</code> is set, the element conforms to its parent's <code>max-width</code> property and when <code>width:*length*</code> is set to a specific length that is larger than the parent's <code>max-width</code> property (i.e. <code>400px</code> in the attached fiddle), the element's output is similar to what is desired, but not exactly what is desired.</p>
  
  <p>The desired result is for the list items to have <em>automatic</em> widths, but not conforming to the parent's <code>max-width</code> property. The list items should:</p>
  
  <ol>
  <li>Have a <strong>width equal to</strong> the total width of the <strong>content it provides</strong> (which is undetermined for each element)</li>
  <li><strong>Not</strong> be <strong>multiline</strong> (each element should be 1 line max)</li>
  <li><strong>Not overlap</strong> the parent element (i.e. using <code>position:absolute;</code>)</li>
  <li><strong>Only</strong> be <strong>scrollable if its width exceeds the parent's width</strong></li>
  </ol>
  
  <p>I would prefer a purely HTML/CSS solution, however I will use a JS/jQuery solution if need be</p>
  
  <p><hr/>
  <strong>HTML</strong></p>
  
  <pre><code>&lt;div id="scroll1"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div&gt;I have some text here that is longer than 300px width, but its width is undefined (width can be between 0 and whatever)&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div&gt;I have text here less than 300px wide&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="scroll2"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;div&gt;I have some text here that is longer than 300px width, but its width is undefined (width can be between 0 and whatever)&lt;/div&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;div&gt;I have text here less than 300px wide&lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#scroll1, #scroll2 {
      max-width:300px;
      margin-bottom:100px;
      overflow:hidden;
  }
  ul {
      max-width:inherit;
      list-style-type:none;
      padding:0px;
  }
  li {
      max-width:inherit;
      overflow:auto;
  }
  li:nth-of-type(even) {
      background-color:#ddd;
  }
  #scroll1 li div {
      width:auto;
  }
  #scroll1 li div {
      width:400px;
  }
  </code></pre>
  
  <hr/>
  
  <p>Thank you for your help!</p>
  
  <p>P.S. I am sorry if this question has already been asked, I was not able to find a duplicate of it. If there is an existing answer out there, I am more than willing to accept it as an answer or remove this question if a result that is given fully answers this question.</p>