Overflow "Visible" and overflow "Scroll" for same style

Question

Sorry if my question makes no sense. However in my case i need both to be active for the same style name. Is there any trick to achive this?

.side-nav {
  position: fixed;
  width: 300px;
  left: 0;
  z-index: 999;
  top: 60px;
  margin: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  height: 100%;
  height: calc(100% + 60px);
  height: -moz-calc(100%);
  padding-bottom: 60px;
  padding-top: 30px;
  background-color: #fff;
  overflow-y: auto;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateX(-105%);
          transform: translateX(-105%);
          overflow: visible;
}

...it's either this one or that one. What exactly are you trying to achieve? What is the required result? — scooterlord
– scooterlord, Commented May 22, 2017 at 22:26
As I said I need them both. The "Side-nav" div is set to fixed, and it has a div inside it that must be outside the parent div ".side-nav". Plus "side-nav" has also long content so i need it to be scroll. — AndrewS
– AndrewS, Commented May 22, 2017 at 22:29
So you need the div inside extend sideways, but also want the inner div to scroll vertically..? — scooterlord
– scooterlord, Commented May 22, 2017 at 22:32

Jim Cote · Accepted Answer · 2017-05-22 22:13:29Z

1

They can't both be active on the same element. "visible" means the content is visible beyond the bounds of the element. "scroll" (and auto) means the element will scroll to display content that goes outside the bounds of the element.

answered May 22, 2017 at 22:13

Jim Cote

1,7563 gold badges15 silver badges27 bronze badges

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

4 Comments

fubar Over a year ago

I'm guessing, but I think OP means same id or class but on two different elements. If not, then you are correct.

AndrewS Over a year ago

I have just uplaod my css code. As it is above, scroll not working, if change overflow > scroll than it works, however visible is also needed.

fubar Over a year ago

So, you do want both properties on the same element? Then @JimCote is correct and it's not possible. You'll need to rewrite your HTML/CSS to circumvent the issue.

AndrewS Over a year ago

yes, i do. and I know Jim Cote is right, but i thought there some one knows a trick...

Collectives™ on Stack Overflow

Overflow "Visible" and overflow "Scroll" for same style

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related