Force horizontal scroll bar

Is it possible to only have it scroll on the x-axis no matter the length?

I have already tried

overflow-x: scroll;
overflow-y: hidden;

and it doesn’t work. Things still go on the y axis i just can’t see them.

Usually that’s the way to go. Do you have a link to the code for further checking?

Maybe it will help if we understood the bigger picture of what you are trying to accomplish. What does the rest of your HTML and CSS look like?

.outputElement {
  background-color: #f5f1ef;
  width: 226px;
  margin-left: 3%;
  border: 1px solid black;
  height: 40px;
}

.xOutput,.yOutput{
  text-align: center;
  font-size: 28px;
}
.xOutput {
  padding-right:4px;
  padding-left: 2px;
width: relative;
  margin-left: -25px;
  border-right: 1px solid black;
  height: 40px;
}
.yOutput {
width: 193px;
  margin-left: -25px;
  height: 40px;
  margin-left: 0px;
overflow: scroll;
  padding-left: 5px;
  vertical-align: baseline;
}

<div class='outputElement' id="outputElement" style="border-radius:12px 12px 0% 0%; margin-top: 10px;"><ul><li><div class='row'><div class='xOutput'>${x}</div><div class='yOutput'
id='yOutput'>${eval(equation)}</div></div></li></ul></div>

That is the div i am working with. The actual project i am doing this on is incredibly lengthy so i am trying to solve this without linking you the project.

I reverted back to the old way i had it, even then its weird.

  • anything with spaces will scroll only on the y axis in the yOutput section.

  • Any number in the xOutput section will work fine and scroll as long in the yOutput section, the number is less then 3 digits.

The same happens with the new scroll code, its just hidden.

Its kinda weird, what can i do to make it so the xOutput section will be able to move in size (relative width), whilst the yOutput section will scroll?

To sum up:

The xOutput section should be able to relatively move width wise, but the yOutPut section should be able to scroll and ‘push over.’

Hopefully this made sense?