Overflow-X Overwritten by Overflow-Y

Overflow-x overwritten by overflow-y

EDITED: After more details by OP:

The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.

Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.

Values of Overflow:

visible:
Default value. Content is not clipped, it may be rendered outside the content box.

hidden:
The content is clipped and no scrollbars are provided.

scroll:
The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.

auto:
Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.

See Reference

Added More Details:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

CSS overflow-y: scroll overwrite my code and other functions not working

What is happening here?

Since your animation works with window.innerHeight whenever you try to add overflow: scroll to your container it will disable the window scrolling, in order to have only one active scrollbar at the same time (This is not actually happening but it is the problem(ish)). So the calculation of document.body.scrollHeight - window.innerHeight; will be 0 then your header animation wont fill ever due to this equation var percentage = scrollPosition / scrollableHeight * 100; (the scrollableHeight is zero so the result will be infinity).

How to fix it?

So the best way to fix this issue is to determine the active scrollbar and assign scroll-behaviour to it's parent. Since in normal flow your active scrollbar is depended on body itself you should remove overflow-y: scroll; from your container and then add scroll-behavior: smooth; to the active scrollbar parent

So your final output should be something like this:

html,body {
  scroll-behavior: smooth;
}

#container {
    width: 100%;
    height: 100vh;
}

...

Overriding overflow: hidden

Answer is: You can't. Either the parent has overflow:hidden then all child-elements will be clipped, or you have overflow:(visible|auto|scroll|...) then all children are treated according to that rule. There is no possibility you could mix states - all children are treated equally.

However, you could introduce additional container-elements inside the parent (which no longer has overflow:hidden) like in this pseudo-code:

<parent>    
   <container1 style="overflow:hidden">
      <!-- these will be clipped -->
      <element>
      <element>
   </container>

   <container2 style="overflow:visible">
      <!-- these will be shown -->
      <element>
      <element> 
   </container>
</parent>

edit: example

overflow hidden is not working, my header is overwritten by content

PROBLEM

Overlapping issue

SOLUTION

use z-index CSS property on header element

e.g

#header {
    z-index: 10;
}

MDN

---

Related Topics