How to make the overflow CSS property work with hidden as value

Question

I am having a tough time with overflow: hidden.

Basically, I am trying to hide the overflow of an unordered list which is located in a <div>.

I have no idea why this isn't working though.

Instead of hiding it, it breaks my list from a horizontal layout to a vertical layout.

The unordered list is carousel and the container is list.

Below is my CSS code;

div.body .container .images {
    background: url(/images/images-background.jpg);
    height: 62px;
    margin-bottom: 17px;
    width: 384px;
}
div.body .container .images #images-previous {
    cursor: pointer;
    float: left;
}
div.body .container .images #images-next {
    cursor: pointer;
    float: left;
}
div.body .container .images .list {
    float: left;
    overflow: hidden;
    vertical-align: top;
    width: 336px;
}
div.body .container .images .carousel {
    margin-bottom: 6px;
    margin-top: 8px;
    width: 336px;
}

Here, my HTML;

<div class="images">
    <div id="images-previous">
        <img src="/images/images-previous.jpg" width="24" height="62" alt="Previous" />
    </div>
    <div class="list">
        <ul class="carousel">
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li> 
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>    
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <li>
                <img src="/photogallery/23.jpg" width="44" height="44" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="thumbnail" />
                <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="over" />
                <img src="/images/carousel-image-holder.png" width="49" height="48" alt="Cross Bottle 8.5" Frosted/Amber/Chain/Fleur di Lis" class="under" />
            </li>
            <!--
            <cfset i=1>
                <cfloop condition="i lte images.recordcount">
                    <cfoutput>
                        <li>
                            <img src="#images.thumburl[i]#" width="44" height="44" alt="#images.alt[i]#" class="thumbnail" />
                            <img src="/images/carousel-image-holder-over.png" width="49" height="48" alt="#images.alt[i]#" class="over" />
                            <img src="/images/carousel-image-holder.png" width="49" height="48" alt="#images.alt[i]#" class="under" />
                        </li>
                    </cfoutput>
                    <cfset i=i+1>
                </cfloop>
            </cfset>
            -->
        </ul>
    </div>
    <div id="images-next">
        <img src="/images/images-next.jpg" width="24" height="62" alt="Next" />
    </div>
<div class="clear"></div>

Is there anything speaking against giving `.list` a fixed height? I think it would work then. — Pekka, Oct 19 '10 at 16:25
@Pekka, it will, i checked. Assuming that the CSS rules apply (*because the HTML posted here does not show the `div.body` and the `.container` elements*) — Gabriele Petrioli, Oct 19 '10 at 16:32
That didn't work. It wraps the list if the list overflows instead of hiding it. — Darren, Oct 19 '10 at 17:01
Hi guys, turns out I cannot use a horizontal menu because the float or inline display will always spill because of the parent width. I am trying a table now but thats being a pain as well. — Darren, Oct 19 '10 at 17:42

score 517 · Accepted Answer · answered Oct 19 '10 at 18:44

517

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.

answered Oct 19 '10 at 18:44

Darren

10,631
8
42
64

1

I had a similar problem with relatively positioned content in a container and needed the container to be relative too. So its not just hiding absolutely positioned elements, its hiding any positioned elements its looking like. :) – Chris Aug 06 '12 at 08:33
5

Actually the parent element only needs to be positioned, which means absolute and fixed are also valid. Basically anything that isn't static. – Ryan Jenkins May 29 '13 at 18:01
1

Great answer, worked for my scenario too. In my case, the div with overflow:hidden had a position:relative attribute. Adding a position:relative to its parent fixed the issue. – Anurag Mar 12 '14 at 10:24

score 85 · Answer 2 · answered May 21 '14 at 20:33

85

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.

answered May 21 '14 at 20:33

rw-nandemo

1,210
1
9
17

1

To anyone else that may still be encountering this issue: the child must be `static`ally positioned, as far as I can tell. Setting `position:relative` to both the parent and child doesn't work. – Alvin Wan Feb 19 '18 at 01:18

Charles Goodwin · Answer 3 · 2020-08-27T21:32:46.130

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!)

score 8 · Answer 4 · edited Aug 18 '18 at 09:45

8

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>

edited Aug 18 '18 at 09:45

Temani Afif

245,468
26
309
415

answered Aug 18 '18 at 08:39

Miloš Đakonović

3,751
5
35
55

2

sorry this doesn't make sense, how did you manage to have overflow with inline? also the documentation is clear : https://developer.mozilla.org/en-US/docs/Web/CSS/overflow the overflow applies only to block container – Temani Afif Aug 18 '18 at 09:07
1

Sure it make sense. Try having position absolute child element with negative offset. You may make such mistake with inline by default elements such as LIs and SPANs – Miloš Đakonović Aug 18 '18 at 09:10
1

@TemaniAfif and Miloš Đakonović .. That is correct, that `inline-block` will, or any other _block like_ display type, though in this case, where the element with `overflow: hidden` has `float`, it work also on `inline` elements. – Asons Aug 18 '18 at 09:11
1

when you add position absolute, the element become a block element so there is no inline involved here – Temani Afif Aug 18 '18 at 09:12
@LGSon as per the documentation, overflow is a property that works on block level element so it cannot work on inline element. I am intresting to know how they face such case, an example would be good here – Temani Afif Aug 18 '18 at 09:13
@LGSon exactly what I said .. overflow will not work because it's an inline element – Temani Afif Aug 18 '18 at 09:15
@TemaniAfif He said `inline-block` will fix it...which it does, and I said, _so does `float`_ on an `inline` element, which you can see here: https://jsfiddle.net/qpa5zLgc/1/ – Asons Aug 18 '18 at 09:16
@TemaniAfif And here is an answer for your 2nd comment: https://stackoverflow.com/questions/41501300/does-position-absolute-make-that-element-a-containing-block ... and as you can see, it's more to it than to say _"add position absolute, the element become a block element"_ – Asons Aug 18 '18 at 09:20
@TemaniAfif And do note, it is the child that got `absolute`, not the parent with `hidden` ... so the given answer is correct, though doesn't apply direct to this question since it uses `float` – Asons Aug 18 '18 at 09:26
@LGSon oh no, not a BoltClock answer, it give me headaches :p ... by the way, the answer should be improved with an example, because I didn't meant that the parent element will be a block element but the element itself that has the position:absolute and I thought that overflow is applied to it. So applying overflow to an initial inline element that is positionned is different from applying overflow to a simple inline element ... because absolute = block and then the parent element is another deal. Also in the question we have no inline element, so it can create confusion. – Temani Afif Aug 18 '18 at 09:32
@TemaniAfif Agree :)...still, here no other answer have sample, and I think, when stating _"**must not** be `display:inline`"_ it covers for the lack of inline elements in the question. Just think it doesn't deserve a downvote being correct. – Asons Aug 18 '18 at 09:39
2

@LGSon let's put your example then, but still not relevant to this question .. should probably be suitable in another question. – Temani Afif Aug 18 '18 at 09:46

score 1 · Answer 5 · answered Oct 29 '20 at 01:51

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?

YulePale · Answer 6 · 2020-05-30T05:31:13.090

This worked for me

<div style="display: flex; position: absolute; width: 100%;">
  <div style="white-space: nowrap; overflow: hidden;text-overflow: ellipsis;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.
  </div>
</div>

Adding position:absolute to the parent container made it work.

PS: This is for anyone looking for a solution to dynamically truncating text.

EDIT: This was meant to be an answer for this question but since they are related and it could help someone on this question I shall also leave it here instead of deleting it.

score 0 · Answer 7 · answered Oct 30 '22 at 05:31

Maybe u could just use de inherit property of cascading by using auto instead

<section style="overflow: hidden">
  <section style="overflow: auto">text within overflow<div>
</section>

In that way, the inner section could display besides the parent elemment

How to make the overflow CSS property work with hidden as value

7 Answers7

Linked

Related