Css 显示Flex元素的水平滚动条

我正在尝试建立一个计算器，我正在设计输出显示的区域

如果输出比显示长，我希望显示一个水平滚动条，以便用户可以看到所有内容

我还希望字符在输入时从右向左显示，就像典型的计算器一样

#计算器{
背景色：rgb（0,0,0）；
颜色：白色；
高度：90vh；
宽度：30%；
}
#展示{
边框：2倍实心rgba（219,93,46,0.918）；
显示器：flex；
身高：11%；
宽度：96%；
保证金：自动；
}
#显示文本{
显示器：flex；
证明内容：柔性端；
对齐项目：柔性端；
空白：nowrap；
溢出：自动；
身高：100%；
宽度：100%；
字体大小：7vh；
}

我的计算器
1+2+3-9+3-9+3-9+5*5+8-15+66*3
按钮会在这里

使用JavaScript

删除

调整内容：柔性端

和添加

溢出-x：滚动至
#显示文本

然后可以使用JavaScript使div在默认情况下一直向右滚动

var objDiv = document.getElementById("display-text");
objDiv.scrollLeft = objDiv.scrollWidth;

仅使用CSS

只要使用CSS，就可以通过删除
justify content:flex end
和添加
溢出-x：滚动，
弹性方向：行反向
和
方向：ltr
到
#显示文本
尝试将
溢出：自动
放在
#显示
样式上，并添加
换行：断开单词
，另外，您正在调整两个div，只需调整父div并让子div成为
阻塞
谢谢您的响应，我应用了您的建议，一个水平滚动条出现了！然而，
justify内容：flex-end似乎被忽略，因为字符现在显示为从左到右，而不是从右到左。感谢您提供此解决方案。它的行为完全符合我的要求。出于好奇，有没有办法只使用CSS来实现这一点？是的，有，请看这个，使用flex方向和方向属性-答案编辑