Firefox - Eliminating the x-scrollbar

Question

Firefox - Eliminating the x-scrollbar

In Firefox, an unwanted x-scrollbar is appearing.
Even when attempting to disable it using overflow-x: hidden;, the width remains incorrect (strings are still hidden).

.wrapper {
  position: absolute;
}
.left {
  height: 150px;
  display: inline-block;
  position: relative;
  overflow: auto;
}
.left > div {
  white-space: nowrap;
  padding-left: 20px;
}

Chrome View:

https://i.sstatic.net/y6oDl.jpg

Firefox View:

https://i.sstatic.net/MHUGC.jpg

Any ideas why this might be happening?

Feel free to experiment with the code on this jsfiddle: https://jsfiddle.net/5yqkoujm/

css firefox

Answer 1

Answer №1

Give this code a try:

.container {
    position: absolute;
}
.sidebar {
    max-height: 250px;
    display: inline-block;
    position: relative;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;  //this solves issue of scrollbar covering content
}
.sidebar > div {
    white-space: nowrap;
    padding-left: 20px;
}

UPDATE: For Mozilla browser compatibility:

.container {
    position: absolute;
}
.sidebar {
    height: 150px;
    display: inline-block;
    position: relative;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}
@-moz-document url-prefix() {
.sidebar {
    height: 150px;
    display: inline-block;
    position: relative;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;  //this fixes scrollbar covering content
}
}
.sidebar > div {
    white-space: nowrap;
    padding-left: 20px;
}

Answer 2

Give this code a try:

.container {
    position: absolute;
}
.sidebar {
    max-height: 250px;
    display: inline-block;
    position: relative;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;  //this solves issue of scrollbar covering content
}
.sidebar > div {
    white-space: nowrap;
    padding-left: 20px;
}

UPDATE: For Mozilla browser compatibility:

.container {
    position: absolute;
}
.sidebar {
    height: 150px;
    display: inline-block;
    position: relative;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
}
@-moz-document url-prefix() {
.sidebar {
    height: 150px;
    display: inline-block;
    position: relative;
    min-width: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 20px;  //this fixes scrollbar covering content
}
}
.sidebar > div {
    white-space: nowrap;
    padding-left: 20px;
}

Answer 3

Answer №2

Here's what I think: you'll need to set a fixed height and dynamic width for the left div to adjust to its content.

An element with display:block (like a div) is by default 100% width. Elements with display:inline or inline-block will adjust to their content size.

Try this UPDATED code:

Another update: hides the scrollbar when there are not enough items to display. Finally, it meets your requirements :)

.wrapper {
  position: absolute;
}

.left {
  height: 150px;
  display: inline-block;
  position: relative;
  overflow-y: auto;
}

.left>div {
  white-space: nowrap;
  display: block; /*Fixed it - here's the solution!*/
  padding-right: 20px;
}

<div class="wrapper">
  <div class="left">
    <div>Some short string</div>
    <div>Some short string</div>
  </div>
  <div class="wrapper">
    <div class="left">
      <div>Some short string</div>
      <div>Some long string that needs to wrap aroundSome long string that needs to wrap aroundSome long string that needs to wrap arundSome string</div>
      <div>Some short</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
    </div>
  </div>

Hope this helps :)

Found the solution thanks to this discussion thread: parent div scaling to content inside it

Answer 4

Here's what I think: you'll need to set a fixed height and dynamic width for the left div to adjust to its content.

An element with display:block (like a div) is by default 100% width. Elements with display:inline or inline-block will adjust to their content size.

Try this UPDATED code:

Another update: hides the scrollbar when there are not enough items to display. Finally, it meets your requirements :)

.wrapper {
  position: absolute;
}

.left {
  height: 150px;
  display: inline-block;
  position: relative;
  overflow-y: auto;
}

.left>div {
  white-space: nowrap;
  display: block; /*Fixed it - here's the solution!*/
  padding-right: 20px;
}

<div class="wrapper">
  <div class="left">
    <div>Some short string</div>
    <div>Some short string</div>
  </div>
  <div class="wrapper">
    <div class="left">
      <div>Some short string</div>
      <div>Some long string that needs to wrap aroundSome long string that needs to wrap aroundSome long string that needs to wrap arundSome string</div>
      <div>Some short</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
      <div>Some short string</div>
    </div>
  </div>

Hope this helps :)

Found the solution thanks to this discussion thread: parent div scaling to content inside it

Firefox - Eliminating the x-scrollbar

Answer №1

Answer №2

Similar questions

Display the div only when certain other divs have been clicked

Navigate to the specified text in the dropdown menu based on the ul li selection

Creating a responsive textbox in Bootstrap - tips and tricks!

Restricting the height of a column in Bootstrap 4 to create a more compact design

Toggle the visibility of three different div elements using JavaScript on mouseover

JQuery: the art of concealing and revealing

Adjusting div container width for better layout

Utilizing em units within CSS media queries is producing erratic outcomes on various browsers

Disabling the hover effect of a material-ui button within a styled component

Selenium is not functioning properly on the server

"Utilizing multiple class names in Next.js to enhance website styling

Converting CSS specific to a particular vendor: A step-by-step

Pictures do not adhere to the maximum width set on their parent elements

Adding a border with vertical padding above and below two floated divs with different heights

Struggling with color styling within link_to tags in Rails 4 - having trouble getting inline styling to show up correctly

Angular - Modify the Background Color of a Table Row Upon Button Click

Create CSS rules to draw lines that stretch to the edges of the container

Using data-image as the source for Bootstrap Modal

Adsense ad unit is not responsive and fails to display properly at dimensions of 320x50 px

jQuery conceal input field after it has been displayed