overflow-x scroll and overflow-y visible

Question

I have a case in which i have to show the content horizontally with overflow-x:scroll;.

Now in this Fiddle the first block has overflow-y:scroll; which gives a scroll and user is able to scroll the content. Where as in the second block user is not able to scroll the content. I want an output this way in the Image, where user can scroll horizontally and see the content.

PeteAUK · Accepted Answer · 2014-05-20 16:11:23Z

2

You need to define an inner container for your second block and give it a width.

<div class="test2"><div>dfdsfdsfds</div></div>

and

.test2 div {
    width: 600px;
}

http://jsfiddle.net/qM45U/8/

The reason for this is that by default, when test reached it's width it will word wrap whereas within the y-axis it will just increase the height of the container (if allowed). You could just set white-space to nowrap but then you'd end up with the longest single line of text in the world :)

answered May 20, 2014 at 16:11

PeteAUK

9988 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Green Wizard Over a year ago

the content which should be wrapped for me is dynamic... will there be any javascript solution

j08691 · Accepted Answer · 2014-05-20 16:09:11Z

1

Give your second div a child div to wrap the content that has the same height but a bigger width. Then style it:

.test2 div {
    width:500px;
    height:100px;
}

jsFiddle example

answered May 20, 2014 at 16:09

j08691

208k33 gold badges269 silver badges281 bronze badges

Collectives™ on Stack Overflow

overflow-x scroll and overflow-y visible

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related