Html 仅当子元素'；s width属性超出父元素'；s最大宽度属性

我想知道如何才能做到这一点

我的代码与本文中的代码类似

我有一个无序列表，其中包含一组

max width

（继承自父级），其中包含许多应该具有自动宽度的列表项。我遇到的问题是，当设置

width:auto

时，元素符合其父元素的

max width

属性，并且当

width:*length*

设置为大于父元素的

max width

属性的特定长度时（即所附小提琴中的

400px

），元素的输出与所需的类似，但并不完全是所需的

期望的结果是列表项具有自动宽度，但不符合父项的

max width

属性。清单项目应：

宽度等于它提供的内容的总宽度（每个元素的宽度不确定）

非为多行（每个元素最多应为一行）

不重叠父元素（即使用

位置：绝对；

）

仅当其宽度超过父级宽度时才可滚动

我更喜欢纯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>

---

谢谢你的帮助

---

另外，如果这个问题已经被问过，我很抱歉，我找不到它的副本。如果有一个现有的答案，我非常愿意接受它作为一个答案，或者如果给出的结果完全回答了这个问题，我会删除这个问题。

这会让你部分达到目的。空白：nowrap将使所有内容保持一致

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

---

}

添加溢出-x：滚动到列表项中的div？

空白：nowrap

正是我想要的，谢谢

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