Only have scrolling on X axis

So i'm trying to make a box in which if the content is to big, it only scrolls on the X. I have tried every stack overflow way i have seen, and can't find a answer after days that works.

Here is my HTML:

<div class="outputElement">
<div class="xOutput" style="border-bottom: 1px solid black;"><h1 class="algbra-h1">X: 10432323232323232323232323232323232323232322</h1></div>
<div class="yOutput" style=""><h1 class="algbra-h1">X: 10432323232323232323232323232323232323232322</h1></div>
</div>


CSS:

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

.xOutput,.yOutput{
vertical-align:top;
text-align: center;
}
.xOutput {
overflow-x: scroll;
height: 40px;
}
.yOutput {
width: 226px;
overflow-x: scroll;
font-size: 30px;
}

.algbra-h1 {
font-size: 30px;
}


Now here is what happens when a long number is in the box:

https://postimg.cc/image/5phnvjiot/

Just encase you want to, the project i am using this on is -->

Line 72 HTML & Line 219-243 CSS

https://codepen.io/Mike-was-here123/pen/QrdJdO

It jumps down a line on the Y-axis, then scrolls on the X. Note that its the same thing in both of those boxes. Its two div's onto of each other, inside of a main div.

Here is what i need:

It only to scroll on the X-axis, it cannot jump down a line then scroll.

Here is what i tried:

Making the Y-hidden --> Just hides it, doesn't prevent it, Anything else amounts to the same outcome.

1 Answer
1

Setting fixed pixel heights to the containing divs is causing the problem. Remove the fixed heights to allow all the text to be visible. The splitting between X and the number is caused by whitespace wrapping. When there isn't enough horizontal space for text, it is broken to the next line at the next whitespace character. The wrapping can be overridden with white-space:nowrap;.

white-space:nowrap;

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

.yOutput {
width: 226px;
overflow-x: scroll;
font-size: 30px;
}

.xOutput {
overflow-x: scroll;
}

.algbra-h1 {
font-size: 30px;
white-space:nowrap;
}


I'm not sure what you want in the big picture but I did resolve the problem described in the question.

I tried to create a code snippet but things broke since the project seems to use a lot of external libraries. I have instead opted to fork the original codepen.

Note: forked, working example pen removed upon request.

white-space:nowrap;

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.