仅当子元素的width属性超出父元素的max-width属性时才进行水平滚动

Question

我想知道如何实现这一目标......

我的代码类似于此jsfiddle中的代码。

我有一个无序列表，其中包含一组max-width（继承自父级），其中包含许多应具有自动宽度的列表项。我遇到的问题是，设置width:auto时，该元素符合其父{h} max-width属性，并且width:*length*设置为特定长度大于父亲的max-width属性（即附加小提琴中的400px），元素的输出与所需的类似，但不完全符合预期。

所需的结果是列表项具有自动宽度，但不符合父{h} max-width属性。列表项应该：

1. 宽度等于 内容提供的总宽度（每个元素未确定）
2. 不 多行（每个元素最多应为1行）
3. 不重叠父元素（即使用position:absolute;）
4. 只有可滚动，如果其宽度超过父级的宽度

我更喜欢纯HTML / CSS解决方案，但如果需要，我将使用JS / jQuery解决方案

<小时/> 的 HTML

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

---

感谢您的帮助！

P.S。我很抱歉，如果这个问题已被提出，我无法找到它的副本。如果那里有现有的答案，我非常愿意接受它作为答案或删除这个问题，如果给出的结果完全回答了这个问题。

Answer 1

这会让你分道扬..白色空间：nowrap会将所有内容保持在同一行

#scroll1 li>div {
width:400px;
white-space: nowrap;
overflow:scroll

}