Overflow-X Not Working

Overflow-x not working

Once you've floated the elements, you've taken them out the document flow and it won't be calculated in the parent's width. You have to use a combination of display: inline-block on the items instead of float, and then use white-space: nowrap on the parent.

#testDiv{
  width: 400px;
  overflow-x: auto;
  border:1px solid black;
  white-space: nowrap; 
  font-size: 0;
}
.testimgdiv{
  width: 120px;
  height: 100px;
  display: inline-block;
}

Fiddle

Note: I'm using font-size: 0 to make the items appear right next to each other.

UPDATE

As this post is quite old, it's probably worth noting that this can be done with less code using flexbox (depending on the browser support level required):

#testDiv {
  width: 400px;
  display: flex;
  overflow-x: auto;
}

.testimgdiv {
  width: 120px;
  height: 100px;
  flex: 0 0 auto;
}

<div id="testDiv">
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
  <div class='testimgdiv'>
    <img class="testimg" src="https://picsum.photos/100/100/" />
  </div>
</div>

CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

After some serious searching it seems i've found the answer to my question:

from: http://www.brunildo.org/test/Overflowxy2.html

In Gecko, Safari, Opera, ‘visible’
becomes ‘auto’ also when combined with
‘hidden’ (in other words: ‘visible’
becomes ‘auto’ when combined with
anything else different from
‘visible’). Gecko 1.8, Safari 3, Opera
9.5 are pretty consistent among them.

also the W3C spec says:

The computed values of ‘overflow-x’
and ‘overflow-y’ are the same as their
specified values, except that some
combinations with ‘visible’ are not
possible: if one is specified as
‘visible’ and the other is ‘scroll’ or
‘auto’, then ‘visible’ is set to
‘auto’. The computed value of
‘overflow’ is equal to the computed
value of ‘overflow-x’ if ‘overflow-y’
is the same; otherwise it is the pair
of computed values of ‘overflow-x’ and
‘overflow-y’.

Short Version:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.

overflow-x scroll not working css

give parameters to width and height, so container can overflow.

http://jsfiddle.net/f5HWD/3

.container{
    width: 900px;
    height: 700px;
    display:table;
    margin: 0 auto;
    overflow:scroll;
}

overflow-x not working css

#outerContainer {
  width: 100%;
  height: 150px;
  background: red;
  overflow: hidden;
  overflow-x: scroll;
  white-space:nowrap;
}

.card {
  display: inline-block;
  width: 100px;
  height: 150px;
  margin-right: 10px;
  background: #fff;
}

overflow-x not working as expected

This code is working just fine here: http://jsfiddle.net/p0qhtgzm/

It seem to me that this scroll bar is appearing due to the width, max-width or min-width property of any of the parent element of <div id="left" class="some"> you can easily fix this issue either by inspecting and overriding that width property or by changing your css as follows:

.some{
overflow-y:auto;  
overflow-x:hidden;
max-width: 100% !important;
min-width: 100% !important;
}

overflow-x:hidden still can scroll

I don't think there's any way to prevent scrolling of an element without using JavaScript. With JS, though, it's pretty easy to set scrollLeft to 0 onscroll.

Overflow-x scroll not working on chrome and working on Firefox

You need to use the CSS white space property on wrapper element, in your example is <ul> tag like the following:

ul.overflow-x-scroll {
  ...
  white-space: nowrap;
}

For each child element, based on your example I think it will be <li> tag, make sure that the value of CSS floating property is none:

ul.overflow-x-scroll li{
  ...
  float: none;
}

overflow-x: auto not working as it should

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

---

Related Topics