CODEWITHSUNDEEP
htmlcss
Max888
Max888

Reputation: 3750

Remove scrollbar with overflow hidden

I'm trying to hide the scrollbar on an overflowing element.
I tried using overflow: hidden; but it doesn't work.

Here is my minimal example:

#navbar {
  width: 10000px;
  border: solid red 1px;
  overflow-x: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="container">
    <div id="navbar">hello</div>
  </div>
</body>

</html>

Upvotes: 1

Views: 79

Answers (3)

Manjuboyz
Manjuboyz

Reputation: 7066

Yes you can have more than 100%, you can have your container set to 100% and have inner element to how much ever you need.

#container {
  width: 100%;
  overflow: hidden;
}

#navbar {
  /* your requirement */
  max-width: 10000px;
  border: solid red 1px;
  white-space: nowrap;
  width: auto;
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div id="container">
    <div id="navbar">Flex items have a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful.
      If you want to make one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid
      out using Flexbox. By changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have
      a default order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want
      to make one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using
      Flexbox. By changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default
      order value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make
      one item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox.
      By changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order
      value of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one
      item display first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By
      changing which item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value
      of 0, therefore items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display
      first, and leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which
      item has the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore
      items with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and
      leave the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has
      the class active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore items
      with an integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave
      the order of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has the class
      active assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore items with an
      integer value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order
      of all other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has the class active
      assigned to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it. Flex items have a default order value of 0, therefore items with an integer
      value greater than 0 will be displayed after any items that have not been given an explicit order value. You can also use negative values with order, which can be quite useful. If you want to make one item display first, and leave the order of all
      other items unchanged, you can give that item an order of -1. As this is lower than 0 the item will always be displayed first. In the live code example below I have items laid out using Flexbox. By changing which item has the class active assigned
      to it in the HTML, you can change which item displays first and therefore becomes full width at the top of the layout, with the other items displaying below it.</div>
  </div>
</body>

</html>

Upvotes: 1

MARSHMALLOW
MARSHMALLOW

Reputation: 1395

overflow-x: hidden; should be in the body selector, and not in #navbar.

Here is your code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        overflow-x: hidden;
      }
      
      #navbar {
        width: 10000px;
        border: solid red 1px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="navbar">hello</div>
    </div>
  </body>
</html>

And as always, a living demo here: https://codepen.io/marchmello/pen/mdeeMPB?editors=1000

Also, you can put overflow-x: hidden; in the #container selector.

Here is your code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #container {
        overflow-x: hidden;
      }
      
      #navbar {
        width: 10000px;
        border: solid red 1px;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="navbar">hello</div>
    </div>
  </body>
</html>

Upvotes: 0

kiranvj
kiranvj

Reputation: 34107

Overflow should be in the parent, not in navbar. Check this.

#container {
  overflow-x:hidden;
}

#navbar {
  width: 10000px;
  border: solid red 1px;
  white-space: nowrap;
}
<!DOCTYPE html>
<div id="container">
  <div id="navbar">hello afjalksjflkasfd ajskfjasflaksfdjaslfdkajs flaksdfjaslkfdja sjfdkasdf aslfdkjas dlfkasdfja lskfdajsdflasd flaksdf asldkf asfdlkasdf alskfdjasldkfa sflasfdja lsdfasldfjasldkfa sflkas fd</div>
</div>

If you want to give overflow to navbar try the below code. You need to add another div inside the navbar.

#navbar {
  overflow-x: hidden;
}

#navbar>div {
  width: 10000px;
  border: solid red 1px;
  white-space: nowrap;
}
<!DOCTYPE html>
<div id="container">
  <div id="navbar">
    <div>hello afjalksjflkasfd ajskfjasflaksfdjaslfdkajs flaksdfjaslkfdja sjfdkasdf aslfdkjas dlfkasdfja lskfdajsdflasd flaksdf asldkf asfdlkasdf alskfdjasldkfa sflasfdja lsdfasldfjasldkfa sflkas fd</div>
  </div>
</div>

Upvotes: 0

Related Questions