css - 为Flex元素显示水平滚动条

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

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

我还希望字符在输入时从右到左出现，就像典型的计算器一样。

#calculator {
  background-color: rgb(0, 0, 0);
  color: white;
  height: 90vh;
  width: 30%;
}

#display {
  border: 2px solid rgba(219, 93, 46, 0.918);
  display: flex;
  height: 11%;
  width: 96%;
  margin: auto;
}

#display-text {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  white-space: nowrap;
  overflow: auto;
  height: 100%;
  width: 100%;
  font-size: 7vh;
}

<div id="App">
  <div id="calculator">
    <div id="calc-header">
      My Calculator
    </div>

    <div id="display">
      <div id="display-text">
        1+2+3-9+3-9+3-9+5*5+8-15+66*3
      </div>
    </div>

    <div id="calc-inputs">
      Buttons will go here
    </div>
  </div>
</div>

目前，没有水平滚动条。当我尝试overflow-x：auto;时，同样的事情。

当我尝试溢出-x：滚动时，我失去了flex-end属性，并且字符开始从左到右显示。

最佳答案

使用JavaScript

删除justify-content: flex-end;并将overflow-x: scroll;添加到#display-text

然后，您可以使用JavaScript将div默认默认滚动到最右边。

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

仅使用CSS

只需使用CSS，就可以删除justify-content: flex-end;并将overflow-x: scroll;，flex-direction: row-reverse和direction: ltr;添加到#display-text