Javascript 将内容添加到内联块div会以意外的方式打乱布局

我有一段HTML/CSS/JS，它的行为方式是我所不期望的。有三个div显示为内联块，并给定固定的高度和宽度。在这些div中有更多的div，我正在用内容填充它们

我的期望是，内容将从顶部开始，一直到div的底部，然后我会以某种方式溢出。至少我以前见过这样的情况

但出于某种原因，我将在下面发布的代码片段中的代码表现不同——两个灰色框向下移动。我很感激你能解释一下为什么它会这样。也许这对我来说太明显了，因为我已经看了两个小时的代码，抓挠了我的头

函数演示（）{
document.getElementById（“clock5”）.innerHTML=“test
sometext”；
}

.user{
显示：内联块；
宽度：128px；
高度：128px；
字号：18pt；
颜色：白色；
背景色：#999；
}
.现在{
背景颜色：绿色；
}

用户4
用户5
用户6

演示

溢出：隐藏

将修复它

它基本上把所有的东西都排到底。因此，要么溢出它，要么设置

vertical align:top.

为什么溢出会修复它？来自w3

“内联块”的基线是其在正常流中最后一个行框的基线，除非其没有内联行框，或者其“溢出”属性的计算值不是“可见”，在这种情况下，基线是底部边距边缘

函数演示（）{
document.getElementById（“clock5”）.innerHTML=“test
sometext”；
}

.user{
显示：内联块；
宽度：128px；
高度：128px；
字号：18pt；
颜色：白色；
背景色：#999；
}
.钟{
边框：#000两倍实心；
}
.现在{
背景颜色：绿色；
}

用户4
用户5
一些文本

用户6

演示

将

垂直对齐

属性（几乎任何值，因为您固定了高度）设置为

。用户

规则应解决此问题

函数演示（）{
document.getElementById（“clock5”）.innerHTML=“test
sometexttest”；
}

.user{
显示：内联块；
宽度：128px；
高度：128px；
字号：18pt；
颜色：白色；
背景色：#999；
垂直对齐：顶部；
}
.现在{
背景颜色：绿色；
}

用户4
用户5
用户6

演示

但为什么？至少从表面上看，内容并没有泛滥。检查Chrome中的元素不会显示任何超出包含div高度的填充、边距或内容。因此，我实际上不想理解为什么您的修复可以工作。