我正在构建一个定制的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;
}
我肯定这是很简单的事情--但我就是不明白why
有没有人能解释一下我做错了什么，为什么它会这么做？
非常感谢！