Menu
overflow: hiddenWith the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead. Use overflow: clip instead. As of Firefox 63, -moz-scrollbars-none , -moz-scrollbars-horizontal , and -moz-scrollbars-vertical are behind a feature preference setting.
It is because you are using position absolute. You cannot use position absolute with overflow hidden, because position absolute moves the targeted element out of context with the document structure.
To activate the overflow property enclose the image, within a div of a particular width and height, and set overflow:hidden . This will ensure that the base container will retain its structure, and any image overflow will be hidden behind the container.
Ok if anyone else is having this problem this may be your answer:
If you are trying to hide absolute positioned elements make sure the container of those absolute positioned elements is relatively positioned.
Actually...
To hide an absolute positioned element, the container position must be anything except for static. It can be relative or fixed in addition to absolute.
Evidently, sometimes, the display properties of parent of the element containing the matter that shouldn't overflow should also be set to overflow:hidden as well, e.g.:
<div style="overflow: hidden">
<div style="overflow: hidden">some text that should not overflow<div>
</div>
Why? I have no idea but it worked for me. See https://medium.com/@crrollyson/overflow-hidden-not-working-check-the-child-element-c33ac0c4f565 (ignore the sniping at stackoverflow!)
In addition to provided answers:
it seems like parent element (the one with overflow:hidden) must not be display:inline. Changing to display:inline-block worked for me.
.outer {
position: relative;
border: 1px dotted black;
padding: 5px;
overflow: hidden;
}
.inner {
position: absolute;
left: 50%;
margin-left: -20px;
top: 70%;
width: 40px;
height: 80px;
background: yellow;
}<span class="outer">
Some text
<span class="inner"></span>
</span>
<span class="outer" style="display:inline-block;">
Some text
<span class="inner"></span>
</span>I did not get it. I had a similar problem but in my nav bar.
What I was doing is I kept my navBar code in this way: nav>div.navlinks>ul>li*3>a
In order to put hover effects on a I positioned a to relative and designed a::before and a::after then i put a gray background on before and after elements and kept hover effects in such way that as one hovers on <a> they will pop from outside a to fill <a>.
The problem is that the overflow hidden is not working on <a>.
What i discovered is if i removed <li> and simply put <a> without <ul> and <li> then it worked.
What may be the problem?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With