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  lt div gt    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    lt div class  images  gt       lt div id  images-previous  gt           lt img src   images images-previous jpg  width  24  height  62  alt  Previous    gt       lt  div gt       lt div class  list  gt           lt ul class  carousel  gt               lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt               lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt                lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt               lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt                   lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt               lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt               lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt               lt li gt                   lt img src   photogallery 23 jpg  width  44  height  44  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  thumbnail    gt                   lt 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    gt                   lt img src   images carousel-image-holder png  width  49  height  48  alt  Cross Bottle 8 5  Frosted Amber Chain Fleur di Lis  class  under    gt               lt  li gt               lt  --              lt cfset i 1 gt                   lt cfloop condition  i lte images recordcount  gt                       lt cfoutput gt                           lt li gt                               lt img src   images thumburl i    width  44  height  44  alt   images alt i    class  thumbnail    gt                               lt img src   images carousel-image-holder-over png  width  49  height  48  alt   images alt i    class  over    gt                               lt img src   images carousel-image-holder png  width  49  height  48  alt   images alt i    class  under    gt                           lt  li gt                       lt  cfoutput gt                       lt cfset i i 1 gt                   lt  cfloop gt               lt  cfset gt              -- gt           lt  ul gt       lt  div gt       lt div id  images-next  gt           lt img src   images images-next jpg  width  24  height  62  alt  Next    gt       lt  div gt   lt div class  clear  gt  lt  div gt

User · Answer

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 gt div navlinks gt ul gt li 3 gt 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  lt a gt  they will pop from outside a to fill  lt a gt   The problem is that the overflow hidden is not working on  lt a gt   What i discovered is if i removed  lt li gt  and simply put  lt a gt  without  lt ul gt  and  lt li gt  then it worked  What may be the problem

User · Answer

This worked for me   lt div style  display  flex  position  absolute  width  100    gt     lt div style  white-space  nowrap  overflow  hidden text-overflow  ellipsis   gt      Lorem ipsum dolor sit amet  consectetur adipiscing elit  Integer nec odio  Praesent libero  Sed cursus ante dapibus diam  Sed nisi     lt  div gt   lt  div gt    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

User · Answer

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    lt div style  quot overflow  hidden quot  gt     lt div style  quot overflow  hidden quot  gt some text that should not overflow lt div gt   lt  div gt   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

User · Answer

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    x000D   x000D   outer   x000D    position  relative  x000D    border  1px dotted black  x000D    padding  5px  x000D    overflow  hidden  x000D    x000D   inner   x000D    position  absolute  x000D    left  50   x000D    margin-left  -20px  x000D    top  70   x000D    width  40px  x000D    height  80px  x000D    background  yellow  x000D    x000D   lt span class  outer  gt  x000D    Some text x000D     lt span class  inner  gt  lt  span gt  x000D   lt  span gt  x000D   lt span class  outer  style  display inline-block   gt  x000D    Some text x000D     lt span class  inner  gt  lt  span gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

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

Examples related to css

Examples related to overflow

Examples related to html