Force horizontal scroll bar

HTML-CSS
1

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.

2

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

4 
.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?