Horizontal scroll only if child element's width property exceeds parent element's max-width property

I'm wondering how this can be achieved...

I have code similar to the code in this jsfiddle.

I have an unordered list with a set max-width (inherited from parent) that contains many list items that should have automatic widths. The issue I am having is that when width:auto is set, the element conforms to its parent's max-width property and when width:*length* is set to a specific length that is larger than the parent's max-width property (i.e. 400px in the attached fiddle), the element's output is similar to what is desired, but not exactly what is desired.

The desired result is for the list items to have automatic widths, but not conforming to the parent's max-width property. The list items should:

1. Have a width equal to the total width of the content it provides (which is undetermined for each element)
2. Not be multiline (each element should be 1 line max)
3. Not overlap the parent element (i.e. using position:absolute;)
4. Only be scrollable if its width exceeds the parent's width

I would prefer a purely HTML/CSS solution, however I will use a JS/jQuery solution if need be

<div id="scroll1">
    <ul>
        <li>
            <div>I have some text here that is longer than 300px width, but its width is undefined (width can be between 0 and whatever)</div>
        </li>
        <li>
            <div>I have text here less than 300px wide</div>
        </li>
    </ul>
</div>
<div id="scroll2">
    <ul>
        <li>
            <div>I have some text here that is longer than 300px width, but its width is undefined (width can be between 0 and whatever)</div>
        </li>
        <li>
            <div>I have text here less than 300px wide</div>
        </li>
    </ul>
</div>

CSS

#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;
}

Thank you for your help!

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.