CSS样式当文本添加到元素中时,将元素拉到页面下方[重复]

我正在Angular中构建一个自定义计算器,并努力准确地理解这里发生了什么。我有5个div元素,设置为10vw的高度和宽度。启动时,div中没有任何内容。我有一组反映0-9的按钮,然后这些按钮前后输入到这些div元素中(因此有效地键入了一个值,在两个数字处强制使用小数点)。当我输入一个值并将其填充到div中时,问题就出现了。此时,它将div向下拉到页面上并继续,直到所有5个值都有值为止,然后所有5个都重新对齐到顶部。

我已经在上创建了这个项目的工作演示 StackBlitz 。

我的div元素是:

 <div class="value">
    <div class="box">{{ digit5 }}</div>
    <div class="box">{{ digit4 }}</div>
    <div class="box">{{ digit3 }}</div>
    .
    <div class="box">{{ digit2 }}</div>
    <div class="box">{{ digit1 }}</div>
  </div>

这两个元素的直接CSS是:

.value {
  font-size: 9vw;  
  text-align: center
}
.box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: row;
}

我相信这真的很简单,但我就是不明白 为什么?

有人能阐明我做错了什么,为什么它会这么做吗?

非常感谢!