3

There are multiple questions named this way, but I didn't find one that applies to my case, so here I am:

In this snippet:

#container:hover {
  overflow-x: hidden;
}

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  bottom: 0;
}
<div id="container">
  <div id="child">
    a<br/>
    b<br/>
    hover<br/>
    me
  </div>
</div>

You can see that overflow-x, which is applied when you hover the red box, will also hide the overflow-y (at least on Chrome). This is annoying because I have a tooltip that I would like to be able to overflow above the red box, and in the meantime I have a menu that will slide from the right side and that should stay hidden.

Is this a bug? Is there a workaround?

Sharcoux
  • 5,546
  • 7
  • 45
  • 78
  • "Is this a bug?" maybe not a bug but as far I know it is a result of CSS specification and expected behaviour. – Deykun Jul 28 '20 at 16:31
  • Well... Can you point me to where you see this? From what I read [here](https://www.w3.org/TR/css-overflow-3/#overflow-clip-edge) this is not what I understand overflow-x is supposed to be doing. – Sharcoux Jul 28 '20 at 17:05
  • https://stackoverflow.com/questions/6421966/css-overflow-x-visible-and-overflow-y-hidden-causing-scrollbar-issue - in the first answer there is a quote from W3C spec, but they probably updated the content of that page and maybe the spec too. – Deykun Jul 28 '20 at 19:54
  • Well even with this sentence, the behavior we see here doesn't match. We don't have overflow-x: hidden and overflow-y: (visible -> auto). We have overflow-x: hidden and overflow-y: (visible -> hidden). – Sharcoux Jul 28 '20 at 21:22
  • I mean it caused by the same thing some connections between those to do not work. – Deykun Jul 28 '20 at 21:31

2 Answers2

3

You can't change the way overflow-x and overflow-y behave (it's the same in Firefox and other browsers), but you can change the way your HTML is organized.

Put everything that you want to hide when overflowing in a single wrapper. Put your tooltip in another wrapper.

Something like this may suit your needs:

#container {
  position: relative;
  width: 400px;
  background: #f77;
  margin: 3em 2em;
}

#child {
  overflow: hidden;
  position: relative;
}

#menu {
  position: absolute;
  left: 100%;
  top: 0;
  background: #dd2;
  transition: .2s;
}

#child:hover #menu {
  transform: translateX(-100%);
}

#tooltip {
  position: absolute;
  bottom: 100%;
}
<div id="container">
  <div id="child">
    hover<br/>
    me
    <div id="menu">
      menu
    </div>
  </div>
  <div id="tooltip">
    a<br/>
    b
  </div>
</div>

Is the clipping behavior a bug?

No, the clipping is in accordance with the spec.

UAs must clip the scrollable overflow area of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).

In your case, the "block-start" side is the top, and the "inline-start" side is the left. That's why you can put your tooltip below the content, and it will trigger a scrollbar.

#container:hover {
  overflow-x: hidden;
}

#container {
  position: relative;
  width: 400px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  /* bottom: 0; */
  top: 0;
}
<div id="container">
  <div id="child">
    hover<br/>
    me<br/>
    a<br/>
    b
  </div>
</div>

So why is it possible to scroll to content overflowing below the box, but not possible to simply make it visible? The reason is that when any overflow property is set to hidden, the entire box becomes a scroll container.

[A scroll container] allows the user to scroll clipped parts of its scrollable overflow area into view.

mfluehr
  • 2,832
  • 2
  • 23
  • 31
  • Unfortunately, that's a bit complicated to do, as I'm using React and the tooltip is a component of the Button... But if we all agree that the spec is not respected here, isn't this a bug? – Sharcoux Jul 28 '20 at 21:25
  • 1
    @Sharcoux I added info about the spec to the bottom of my answer. – mfluehr Jul 29 '20 at 13:01
0

You can use overflow: clip, which does not turn the box into a scroll container. If you clip in both direction, you can also adjust the distance at which clipping occurs as well using overflow-clip-margin :

#container:hover {
  overflow-x: clip;
}


#container {
  position: relative;
  width: 200px;
  height: 40px;
  background: red;
  margin: 2em;
}

#child {
  position: absolute;
  bottom: 0;
}
<div id="container">
  <div id="child">
    aazkopekzapoekzapoekzapoekzapoekpozakepozakepozakeoza<br/>
    b<br/>
    hover<br/>
    me
  </div>
</div>
cghislai
  • 1,751
  • 15
  • 29