Html 计算器应用程序上的按钮超出了他们的div家长

我正在制作这个计算器，这让我今天下午发疯了。我第一次使用网格，直到现在我只使用flex box

问题是按钮超出了div（计算器）的范围。我主要是为移动设备建造这个。在Chrome上的移动模拟器看起来很完美，但我一上传并在手机上查看，按钮就在div之外了……我已经建立了几十个测试网站，从来没有出现过这个问题，一切都停留在应该停留的地方

我做错了什么？我在这里已经两个小时了，想让它工作起来，我乞求自己觉得自己很愚蠢

*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
}
身体{
背景：线性梯度（90度，rgba（0244147.7），rgba（30144255.7））；
}
.计算器{
边框：1px实心rgb（0,0,0,3）；
宽度：80vw；
高度：80vh；
保证金：自动；
位置：相对位置；
顶部：50vh；
转化：translateY（-50%）；
边界半径：10px；
背景：rgb（22525225）；
盒影：0 0 10px rgb（0,0,0,7），-5px-5px 10px rgb（0,0,0,3）插图，5px 5px 5px rgb（255255）插图；
}
.姓名{
宽度：100%；
身高：3%；
位置：绝对位置；
}
h5{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：.8em；
颜色：rgb（0,0,0,5）；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.产出{
宽度：90%；
身高：25%；
保证金：自动；
利润率最高：5.5%；
背景：白色；
盒影：0.5pxRGB（0,0,0,7）插入；
边界半径：3px；
}
.以前的{
宽度：100%；
身高：40%；
边框底部：5px实心rgb（0,0,0,5）；
}
.当前{
宽度：100%；
身高：60%；
}
.键盘家长{
宽度：90%；
身高：75%；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
边框：3倍纯红；
}
.键盘{
宽度：100%；
身高：90%；
保证金：自动；
边框：3倍纯黑；
}
.顶{
显示：网格；
网格模板柱：2fr 1.5fr 1fr；
栅隙：.5em；
-webkit缺口：.5em；
}
.休息{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
栅隙：.5em；
-webkit网格间距：.5em；
边缘顶部：.5em；
}
钮扣{
光标：指针；
字号：1.5em；
填充：10px；
边界半径：10px；
边界：无；
盒影：0.0 3px rgba（0,0,0,5），-3px-3px 5px rgba（0,0,0,3）插图，3px 3px 5px rgba（255255,8）插图；
大纲：无；
背景：rgba（250250，.8）；
}
.颜色{
背景：rgba（0200197,3）；
}
按钮：激活{
变换：比例（.95）；
}

马修工业公司
C
%
7.
8.
9
/
4.
5.
6.
x
1.
2.
3.
-
.
0
=
+

高度

.calculator

单位

vh

至

%

即

改变这个

.calculator{ 
   height: 80vh;
}

到

这样

高度：50px到
。输出
而不是
高度：25%

还向
.keyboardparent

.keyboardparent {  margin-bottom: 5.5%;} // you already given margin-top: 5.5%; to output


*{
保证金：0；
填充：0；
框大小：边框框；
字体系列：“蒙特塞拉特”，无衬线；
}
身体{
背景：线性梯度（90度，rgba（0244147.7），rgba（30144255.7））；
}
.计算器{
边框：1px实心rgb（0,0,0,3）；
宽度：80vw；
身高：80%；
保证金：自动；
位置：相对位置；
顶部：50vh；
转化：translateY（-50%）；
边界半径：10px；
背景：rgb（22525225）；
盒影：0 0 10px rgb（0,0,0,7），-5px-5px 10px rgb（0,0,0,3）插图，5px 5px 5px rgb（255255）插图；
}
.姓名{
宽度：100%；
身高：3%；
位置：绝对位置；
顶部：10px；
}
h5{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：.8em；
颜色：rgb（0,0,0,5）；
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.产出{
宽度：90%；
高度：50px；
保证金：自动；
利润率最高：5.5%；
背景：白色；
盒影：0.5pxRGB（0,0,0,7）插入；
边界半径：3px；
}
.以前的{
宽度：100%；
身高：40%；
边框底部：5px实心rgb（0,0,0,5）；
}
.当前{
宽度：100%；
身高：60%；
}
.键盘家长{
宽度：90%；
身高：75%；
保证金：自动；
显示器：flex；
弯曲方向：立柱；
证明内容：之间的空间；
对齐项目：居中；
边框：3倍纯红；
利润底部：5.5%；
}
.键盘{
宽度：100%；
身高：90%；
保证金：自动；
边框：3倍纯黑；
}
.顶{
显示：网格；
网格模板柱：2fr 1.5fr 1fr；
栅隙：.5em；
-webkit缺口：.5em；
}
.休息{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
栅隙：.5em；
-webkit网格间距：.5em；
边缘顶部：.5em；
}
钮扣{
光标：指针；
字号：1.5em；
填充：10px；
边界半径：10px；
边界：无；
盒影：0.0 3px rgba（0,0,0,5），-3px-3px 5px rgba（0,0,0,3）插图，3px 3px 5px rgba（255255,8）插图；
大纲：无；
背景：rgba（250250，.8）；
}
.颜色{
背景：rgba（0200197,3）；
}
按钮：激活{
变换：比例（.95）；
}

马修工业公司
C
%
7.
8.
9
/
4.
5.
6.
x
1.
2.
3.
-
.
0
=
+
我找到了

我从
.calculator
中删除了
高度
，给出了
高度：120px到
。输出
并添加
填充：30px 0至
.keyboardparent

感谢您之前的解决方案，我不认为
.calc的高度
.keyboardparent {  margin-bottom: 5.5%;} // you already given margin-top: 5.5%; to output