时间戳

首页 > 解决方案 > 让 Flex 元素出现水平滚动条

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>

现在，没有水平滚动条。当我尝试溢出-x：自动；，同样的事情。

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

标签： css

解决方案

使用 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

推荐阅读