我对 CSS 中的溢出属性有一些疑问- 检查下面的代码片段，
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">HelloWorld</div>
</div>
</body>在上面的代码片段中，inner-div 容器在 x 方向而不是 y 方向溢出。但是如果我添加 overflow: scroll，那么它会在两个方向上添加一个滚动条(直到这里很好)，但是 我可以使用 y 方向的滚动条而不是 x-方向，尽管 inner-div 容器在 x 方向溢出。为什么会这样？
检查这个片段，
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
overflow: scroll;
}
.inner-div {
border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">HelloWorld</div>
</div>
</body>
</html>我的最后一个问题是，如果我用连字符 (-) 或空格分隔文本，为什么它会分成两行而不是在同一行继续？我知道这可能是因为我的外容器的大小，但为什么当我输入不带空格的文本时它不 split ？ 检查下方，
.outer-div {
display: flex;
position: relative;
height: 3.5em;
width: 20%;
border: 2px solid #000000a3;
margin-left: 300px;
align-items: center;
border: 1px solid green;
}
.inner-div {
border: 1px solid blue;
position: absolute;
right: 1%;
font-size: 40px;
}<html>
<head>
</head>
<body>
<div class = "outer-div">
<div class = "inner-div">Hello World</div>
</div>
</body>
</html>非常感谢您的宝贵时间和帮助!
最佳答案
inner-div 类将 position: absolute 属性赋予 div。这使得内部 div 独立于父 div 的大小，并且将始终溢出，直到您明确指定父容器的高度和宽度并且停止锚定内部 div(使用 right, 顶部、左侧 和底部)。通过不锚定 inner-div，绝对定位元素的目的有点被打败了。您可以通过删除 right 来恢复水平滚动条，但您可能不希望这种情况发生。
简而言之，绝对定位的元素不是流的一部分，而是存在于另一个维度中(它们对父 div 不可见)。
这就是自动换行的工作原理。如果一行中的单词不适合宽度，则在遇到空白后将单词移至下一行。如果您不希望单词在空格后扭曲，您应该使用不间断空格 (Ex: ) 或使用 white-space: nowrap; .
关于css - CSS 中的 overflow 属性实际上是如何工作的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47707594/