Html CSS：防止包含文本内容的子元素增大窗口大小

我有一个包含长文本内容的元素，当它大于父元素的宽度时，我希望截断/收缩该元素。但是，不是使用“文本…”样式截断/收缩，而是整个窗口宽度增加，并显示一个水平滚动条。 如何解决此问题，以及通常如何防止子元素增加父元素的宽度？请注意，content元素位于flex项中

示例代码：

HTML

谢谢， Z

删除：

 white-space: nowrap; 

从您的文章css类

---

或者，如果您的意思是要截断文本。您将需要一个固定的宽度，或者如果您想使用flexbox进行此操作：

尝试按百分比为nav和main指定宽度

例如：

   nav {
    background-color: aquamarine;
    width: 30%;

    flex-shrink: 0;
    overflow-y: scroll;
    border-right: 0.2em solid black;
}

main {
    background-color: bisque;
    width: 70%;

}

---

这可以解决这个问题。问题（约束）是我需要根据em调整导航的大小，以便它取决于字体大小。我可能希望nav更加灵活，根本不想使用固定大小。链接中给出的解决方案，即“在flex子级上添加

minwidth:0；

”，即使长文本内容在dom树中更深，也能很好地工作。谢谢

 white-space: nowrap; 

   nav {
    background-color: aquamarine;
    width: 30%;

    flex-shrink: 0;
    overflow-y: scroll;
    border-right: 0.2em solid black;
}

main {
    background-color: bisque;
    width: 70%;

}