overflow-x:hidden; won't work but overflow-x:scroll; will?

Question

I have a table that contains various information. I'm trying to make it so that when it's content overflows it will provide a horizontal scrollbar to see the content.

overflow-x:scroll; is pretty much exactly what i want except i don't want to show the scrollbar when there is no content to overflow. So overflow-x:hidden; should be what i need. However, when i use that no scrollbar appears even if the content does overflow.

I've used overflow-x:hidden; before so I'm not really sure whats wrong.

An example can be seen via codepen

The css in question is located under .dataTables_wrapper{} on line 19

/* -----------NEED HELP HERE-----------       Cant get overflow-x: hidden to work */
.dataTables_wrapper{
  overflow-x: hidden; /*This wont work, acts like overflow hidden*/
  overflow-x: scroll; /*This works and is the desired effect but i dont want the scrollbar to show if no overflow*/
  background: #1B1E24;
}

Vitorino fernandes · Accepted Answer · 2020-01-17 16:33:55Z

1

Setting overflow:auto will fix your issue this will add scroller on when the width exceeds

.dataTables_wrapper{
  overflow:auto; /* set overflow auto */
  background: #1B1E24;
}

answered Jan 17, 2020 at 16:33

Vitorino fernandes

16k3 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matte Crystal Over a year ago

Wow thanks, I'm so dumb. lol overflow:hidden acting like overflow:hidden; Well isn't that something.

Collectives™ on Stack Overflow

overflow-x:hidden; won't work but overflow-x:scroll; will?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related