HTML Overflow Not Scrolling

Question

I am making a HTML calculator, and I am using tables to align everything. However, when to many characters are typed in, the calculator gets bigger instead of scrolling, even though there is the overflow-x: scroll property. This is my code so far:

var problem = ""
var answer = document.getElementById("responseSpan")

var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."]

function hit(key) {
  //console.log(key)
  if (chars.includes(key)) {
    problem = problem + key
  }

  answer.innerText = problem
}

body {
  background-color: #e0e0e0;
}

table {
  width: 25%;
  border-spacing: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

td {
  border: 1px solid gray;
  padding: 1px;
  text-align: right;
}

.clickable {
  cursor: pointer;
  text-align: center;
  color: black;
  padding-top: 5%;
  padding-bottom: 5%;
  font-size: 1.5em;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.clickable:hover {
  filter: brightness(85%);
}

#response {
  color: white;
  background-color: gray;
  font-size: 70px;
  padding-top: 2%;
  padding-bottom: 2%;
}

#responseSpan {
  overflow-x: scroll;
}

When ever I press more characters than the response span can handle, it gets larger rather than scrolling.

Anis R. · Accepted Answer

For overflow-x: scroll to work, your span element should have a display of inline-block (or block), as well as a defined width, e.g.:

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

Demo:

var problem = ""
var answer = document.getElementById("responseSpan")

var chars = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "."]

function hit(key) {
  //console.log(key)
  if (chars.includes(key)) {
    problem = problem + key
  }

  answer.innerText = problem
}

body {
  background-color: #e0e0e0;
}

table {
  width: 25%;
  border-spacing: 0px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

td {
  border: 1px solid gray;
  padding: 1px;
  text-align: right;
}

.clickable {
  cursor: pointer;
  text-align: center;
  color: black;
  padding-top: 5%;
  padding-bottom: 5%;
  font-size: 1.5em;
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.clickable:hover {
  filter: brightness(85%);
}

#response {
  color: white;
  background-color: gray;
  font-size: 70px;
  padding-top: 2%;
  padding-bottom: 2%;
}

/* Changes are here */
#responseSpan {
  overflow-x: scroll;
  display: inline-block;
  width: 25vw;
}

HTML Overflow Not Scrolling

Answers (1)

Related Questions