Overflow-x stops working when I add overflow-y

uservTvB 0
Viewed 51

.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 class="scrollable-items">
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 1</div>
        <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 2</div>
        <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 3</div>
        <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 4</div>
        <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 5</div>
        <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
      </div>

Basically, I have one vertical navigation bar

enter image description here

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.

css html
2 Answers

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 class="scrollable-items">
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 1</div>
        <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 2</div>
        <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 3</div>
        <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 4</div>
        <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 5</div>
        <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
      </div>

aghashamim0

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 class="scrollable-items">
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 1</div>
    <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 2</div>
    <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 3</div>
    <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 4</div>
    <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 5</div>
    <div class="cx-mainnav-hoverlabel">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).

A Haworth0
Related