Html 当父对象在x轴上太小时，如何使嵌套的div可滚动？

我正在尝试在具有相对宽度的父div中有一个固定宽度的嵌套div

关键是，嵌套的div应该始终具有固定的宽度。如果父对象的宽度较小，则嵌套对象应具有x滚动条，因此其可见部分将小于其固定宽度

JSFIDLE将有助于：

HTML

我希望最后的“z”应该总是写在第二行，因为嵌套的div应该是30个字符长。当您减小窗口宽度时，嵌套窗口的可见部分将变小，但“z”仍应位于第二行，第一行的所有数字都带有滚动条

我希望这足够清楚：）

---

感谢您的帮助

如果我解释正确，只需添加

单词break:break-word

到

.nested

CSS以强制将“z”添加到新行。

这就是您要查找的内容吗

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    overflow-x: scroll;
    width: 70%;
}

.nested {
    width: 30ch;
    background-color: orange;
    font-family: monospace;
    word-wrap: break-word;
}

---

詹特说的方法可以解决标点问题，但这仍然是另一个问题

如果父div的宽度太小（例如width=20%），它将显示如下

所以，我改进了方法

希望能有帮助

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    width: 70%;
}

.nested {
    width: 30ch;
    max-width: 100%;
    overflow-x: scroll;
    background-color: orange;
    font-family: monospace;
}

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    overflow-x: scroll;
    width: 70%;
}

.nested {
    width: 30ch;
    background-color: orange;
    font-family: monospace;
    word-wrap: break-word;
}

.parent {
    background-color: red;
    height: 100px;
    padding-top: 10px;
    width: 20%;
    overflow:scroll;
}
.nested {
    width: 30ch;
    /* max-width: 100%; */
    /* overflow-x: scroll; */
    background-color: orange;
    font-family: monospace;
    word-break: break-word;
}