Html 为什么外部<；部门>；这里没有完全包围内部<；部门>；？

我这里有一个JSFIDLE：

和此处的测试网页：

问题是：当您将包含窗口的大小调整为较窄时，为什么内部

的内容不能防止外部

收缩到小于内部

的宽度

根据我得到的问题答案进行更新：

我可以使用以下方法解决Chrome或Safari的问题：

宽度：适合内容

…在外部
，但这并不能解决Firefox或Edge的问题。此外，MDN将
fit content
标记为：

这是一个实验性API，不应在生产代码中使用

wordbreak：在外部将所有的
都打断
有点，有点帮助，但会弄乱所有的单词包装。如果我试图通过在
和
标记上设置
正常
中断来进行补偿，则外部
中断所有
提供的帮助将消失

有一件事让我很困惑，那就是我知道我见过这样的情况，根本没有溢出问题，而且我不必特意去做我期望的行为。在这个简化的例子中，我遗漏了什么错误



正文{
保证金：4em；
}
.演示{
背景色：#BFC；
框大小：边框框；
保证金：0；
填充：1em；
位置：相对位置；
/*width:fit content；//它适用于Chrome或Safari，但不适用于Firefox或Edge*/
/*单词break:break all；//出于某种原因，这种方法也有帮助，但当然会把所有的单词包装搞砸*/
/*如果我尝试将“wordbreak:normal”应用于并使用标签进行补偿，则内部会再次泄漏*/
}
.演示p：第一个孩子{
边际上限：0；
}
.其他东西{
对齐项目：居中；
背景色：#AEB；
显示器：flex；
}
钮扣{
右边距：1米；
}
.广场{
显示：内联块；
背景色：#699；
高度：80px；
右边距：1米；
最小宽度：80px；
宽度：80px；
}
.圆圈{
边界半径：50px；
显示：内联块；
背景色：#969；
高度：100px；
右边距：1米；
最小宽度：100px；
宽度：100px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

一键
另一个按钮
不要点击！
您需要使用
flex-wrap:wrap
将内容拆分到下一行

这么说来，由于您使用的是固定宽度的
按钮
，这是您在较小屏幕中的最佳选择


正文{
保证金：4em；
}
.演示{
背景色：#BFC；
框大小：边框框；
保证金：0；
填充：1em；
位置：相对位置；
}
.演示p：第一个孩子{
边际上限：0；
}
.其他东西{
对齐项目：居中；
显示器：flex；
柔性包装：包装；
}
钮扣{
右边距：1米；
}
.广场{
显示：内联块；
背景色：#699；
高度：80px；
右边距：1米；
最小宽度：80px；
宽度：80px；
}
.圆圈{
边界半径：50px；
显示：内联块；
背景色：#969；
高度：100px；
右边距：1米；
最小宽度：100px；
宽度：100px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

一键
另一个按钮
不要点击！
使用
内联块
和
最小宽度：100%
的组合可以完成您想要的操作。块元素的宽度是根据其父元素（包含块）定义的，而
内联块
的宽度是根据其内容定义的

添加
minwidth:100%
将使其表现为块元素。在这种情况下，它不是强制性的，因为您已经有很多内容，所以您一定要涵盖所有宽度：


正文{
保证金：4em；
}
.演示{
背景色：#BFC；
框大小：边框框；
保证金：0；
填充：1em；
位置：相对位置；
显示：内联块；
最小宽度：100%；
}
.演示p：第一个孩子{
边际上限：0；
}
.其他东西{
对齐项目：居中；
显示器：flex；
}
钮扣{
右边距：1米；
}
.广场{
显示：内联块；
背景色：#699；
高度：80px；
右边距：1米；
最小宽度：80px；
宽度：80px；
}
.圆圈{
边界半径：50px；
显示：内联块；
背景色：#969；
高度：100px；
右边距：1米；
最小宽度：100px；
宽度：100px；
}

知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。二人世界
这是一种令人厌恶的行为，因为它是一种不平等的行为。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

一键
另一个按钮
不要点击！
您可以添加
flex-wrap:wrap
以使弹性项目能够缠绕，也可以添加
overfow:scroll
以使其能够水平滚动。否则,，