Javascript HTML溢出不滚动

我正在制作一个HTML计算器，我正在使用表格来对齐所有内容。但是，当输入的字符数达到10个时，计算器会变大，而不是滚动，即使存在overflow-x:scroll属性。这是我目前的代码：

var problem=“”
var answer=document.getElementById（“responseSpan”）
变量字符=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“0”、“0”]
功能点击（键）{
//console.log（键）
if（包括字符（键））{
问题=问题+钥匙
}
answer.innerText=问题
}

正文{
背景色：#E0；
}
桌子{
宽度：25%；
边界间距：0px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
}
运输署{
边框：1px纯色灰色；
填充：1px；
文本对齐：右对齐；
}
.可点击{
光标：指针；
文本对齐：居中；
颜色：黑色；
垫面：5%；
垫底：5%；
字号：1.5em；
用户选择：无；
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
-o-用户选择：无；
}
.可点击：悬停{
滤光片：亮度（85%）；
}
#回应{
颜色：白色；
背景颜色：灰色；
字体大小：70px；
垫面：2%；
垫底：2%；
}
#应答器{
溢出-x：滚动；
}

计算器
0
自动控制
+/-
%
➗
7.
8.
9
x
4.
5.
6.
-
1.
2.
3.
+
0
.
=

对于

overflow-x:scroll

要工作，span元素应显示

内联块

（或

块

），以及定义的宽度，例如：

#responseSpan {
  overflow-x: scroll;
  display: inline-block;
  width: 25vw;
}

演示：

var problem=“”
var answer=document.getElementById（“responseSpan”）
变量字符=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“0”、“0”]
功能点击（键）{
//console.log（键）
if（包括字符（键））{
问题=问题+钥匙
}
answer.innerText=问题
}

正文{
背景色：#E0；
}
桌子{
宽度：25%；
边界间距：0px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
位置：绝对位置；
}
运输署{
边框：1px纯色灰色；
填充：1px；
文本对齐：右对齐；
}
.可点击{
光标：指针；
文本对齐：居中；
颜色：黑色；
垫面：5%；
垫底：5%；
字号：1.5em；
用户选择：无；
-moz用户选择：无；
-khtml用户选择：无；
-webkit用户选择：无；
-o-用户选择：无；
}
.可点击：悬停{
滤光片：亮度（85%）；
}
#回应{
颜色：白色；
背景颜色：灰色；
字体大小：70px；
垫面：2%；
垫底：2%；
}
/*这里有变化*/
#应答器{
溢出-x：滚动；
显示：内联块；
宽度：25vw；
}

计算器
0
自动控制
+/-
%
➗
7.
8.
9
x
4.
5.
6.
-
1.
2.
3.
+
0
.
=

使用表格在网页中定位元素是一种不好的做法。你会有很多问题。更好地使用css网格。