CODEWITHSUNDEEP
htmlcss
Tony Montana
Tony Montana

Reputation: 1018

"overflow-x: auto" not working as it should

I am trying with overflow-x: auto, but it is not working as it should. Where no scroll bar should be visible, it is showing horizontal scrollbar.

Vertical scrollbar(overflow-y) is working perfectly as desired, but horizontal scrollbar(overflow-x) is not working properly. Here is the JSFiddle link.

Upvotes: 3

Views: 8083

Answers (2)

Hitesh Misro
Hitesh Misro

Reputation: 3461

Here are some minor changes required in your classes to get it work as you expected.

.container_row
{
    width: 100%;
    white-space: nowrap;
    display: inline-block;
    margin: 0 auto;
}
#name_label 
{
    list-style: disc inside;
    margin-left: 10px;
    float: left;
    color: white;
    display: list-item;
    width: 50%;
}
#name_text
{
    color: white;
    padding-left: 5px;
    width: 50%;
    display: inline;
}

Updated

Check this Example fiddle

Upvotes: 2

AlexG
AlexG

Reputation: 5919

You're making your #container1 larger than 100%. Change it to the following:

#container1 {
  width: 100%;
  padding: 10px 0;
}

Upvotes: 0

Related Questions