Overflow-x stops working when I add overflow-y-CodePudding

.scrollable-items {
  min-height: 300px;
  overflow-x: unset;
  overflow-y: auto;
  width: 50px;
}
.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
}

.cx-mainnav:hover   .cx-mainnav-hoverlabel {
  opacity: 1;
}

 <div >
      <div >
        <div >Icon 1</div>
        <div >Icon 1 Tooltip</div>
      </div>
      <div >
        <div >Icon 2</div>
        <div >Icon 2 Tooltip</div>
      </div>
      <div >
        <div >Icon 3</div>
        <div >Icon 3 Tooltip</div>
      </div>
      <div >
        <div >Icon 4</div>
        <div >Icon 4 Tooltip</div>
      </div>
      <div >
        <div >Icon 5</div>
        <div >Icon 5 Tooltip</div>
      </div>

Basically, I have one vertical navigation bar

Before adding scrollbar-y, I used see tooltip on hovering on element in left side of icon.

But, once I added overflow-y as auto, now I can't see tooltip on hover in left side of icon.

In this context, I want to add scrollbar on y axis, but I want to show tooltip as well in left side of icon when I hover over element. Currently, I am not able to achieve both things at same time.

CodePudding user response：

That's because your .scrollable-items does not have a height, which is why you might not be able to see it as it might be getting hidden. Once you provide that or add more icons, it should appear as expected.

.scrollable-items {
  min-height: 300px;
  overflow-x: unset;
  overflow-y: auto;
}
.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
}

.cx-mainnav:hover   .cx-mainnav-hoverlabel {
  opacity: 1;
}

    <div >
      <div >
        <div >Icon 1</div>
        <div >Icon 1 Tooltip</div>
      </div>
      <div >
        <div >Icon 2</div>
        <div >Icon 2 Tooltip</div>
      </div>
      <div >
        <div >Icon 3</div>
        <div >Icon 3 Tooltip</div>
      </div>
      <div >
        <div >Icon 4</div>
        <div >Icon 4 Tooltip</div>
      </div>
      <div >
        <div >Icon 5</div>
        <div >Icon 5 Tooltip</div>
      </div>

CodePudding user response：

You could unset the overflow-y on hover.

.scrollable-items {
  min-height: 300px;
  overflow-x: unset;
  overflow-y: auto;
  width: 50px;
}

.scrollable-items:hover {
  overflow-y: unset;
}

.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
}

.cx-mainnav:hover .cx-mainnav-hoverlabel {
  opacity: 1;
}

<div >
  <div >
    <div >Icon 1</div>
    <div >Icon 1 Tooltip</div>
  </div>
  <div >
    <div >Icon 2</div>
    <div >Icon 2 Tooltip</div>
  </div>
  <div >
    <div >Icon 3</div>
    <div >Icon 3 Tooltip</div>
  </div>
  <div >
    <div >Icon 4</div>
    <div >Icon 4 Tooltip</div>
  </div>
  <div >
    <div >Icon 5</div>
    <div >Icon 5 Tooltip</div>
  </div>

You'll have to decide whether that is good enough for your real life case (the scrollbar disappearing on hover for example).