CSS scrollable-y, visible-x

Question

My question is related to CSS overflow-y:visible, overflow-x:scroll but I am still not able to solve my problem. I want a scrollable sidebar on y-axis with a visible tag hanging on the x-axis.

My HTML setup:

<div>
   <ul>
     <li>
     </li>
     <li>
       <div> ... //want it to be visible x
       </div>
     </li>
   </ul>
</div>

CSS:

I tried to use this:

.div { overflow-y:scroll; overflow-x:visible; }
.li { position:relative; }
.div { position:absolute; top:0px; left:-100px; display:inline-block; }

your css has all classes. but HTML does not have any class. may b you are using an extra dot — tech2017, Jun 06 '17 at 15:48
Do you know that you're applying the css to classes, not elements. — Thomas Orlita, Jun 06 '17 at 15:48

score 0 · Answer 1 · answered Jun 06 '17 at 16:01

Generally if you want the to view the scroll in the div you should use

overflow-x:scroll;

Please make sure to add a class otherwise the scroll will appear in the outer div too, Or use the hierarchy.

div ul li div{ overflow-x:scroll }
.my-div-scroll{ overflow-x:scroll }

CSS scrollable-y, visible-x

1 Answers1