overflow-x: scroll doesn't seem to work

Question

I am confused why this doesn't work. I'm trying to achieve horizontal scrolling inside div.queue-wrapper, so div.queue-month don't fall down one after another if there is not enough space (which is what they do at the moment).

HTML

        <div class="queue-container">
            <div class="queue-wrapper clearfix">
                <div class="queue-month">
                    1
                </div>
                <div class="queue-month">
                    2
                </div>
                <div class="queue-month">
                    3
                </div>
            </div>
        </div> <!-- .queue-container -->

CSS

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
    overflow-x: scroll;
    background: yellow;
    width: 100%;
}

.queue-month {
    width: 385px;
    float: left;
    background-color: orange;
}

jsfiddle example

I'm using bootstrap 3, but as it doesn't work in fiddle I assume it has nothing to do with the problem.

Answer 1

You can use white-space to be nowrap and use inline-block display instead of float:

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
    overflow-x: auto;/*changed from scroll*/
    background: yellow;
    width: 100%;
    white-space: nowrap;/*using nowrap*/
}

.queue-month {
    width: 385px;
    display: inline-block;/*instead of float:left;*/
    background-color: orange;
}

<!-- Dragable queue section -->
        <div class="queue-container">
            <div class="queue-wrapper clearfix">
                <div class="queue-month">
                    1
                </div>
                <div class="queue-month">
                    2
                </div>
                <div class="queue-month">
                    3
                </div>
            </div>
        </div> <!-- .queue-container -->

Answer 2

You do not give nothing to scroll, try this:

CSS

.queue-container {
    height: 260px;
    width: 100%;
    background-color: grey;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.5);
}

.queue-wrapper {
  background: yellow;
  width: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

.queue-month {
  width: 385px;
  background-color: orange;
  display: inline-table;
}

https://jsfiddle.net/g1rLkfjr/2/