You can use overflow-x
and white-space: nowrap;
, note that elements have to use display: inline-block;
, I believe this does not work with float
, so remove it from your elements.
In case your code would look like this (which uses Select2 ):
/* itens dentro do select2 */
.select2-selection--multiple .select2-search--inline {
float: none;/*"remove" o float*/
display: inline-block;
}
/* área para digitar dentro do select2 */
.select2-selection--multiple .select2-selection__choice {
float: none;
display: inline-block;
}
/* área aonde ficam os items e o campo para digitar */
.select2-selection--multiple .select2-selection__rendered {
overflow-x: auto;
}
An example to see the effect (and that will be useful to future visitors to the question)
.area {
border: 1px #ccc solid;
padding: 5px;
width: 400px;
overflow-x: auto;
white-space: nowrap;
}
.area > .item {
border-radius: 2px;
background-color: #455a64;
display: inline-block;
margin: 0 0 0 2px;
padding: 5px;
color: #fff;
}
.area > .item:last-child {
margin: 0;
}
<div class="area">
<div class="item">
Memes
</div>
<div class="item">
Programação
</div>
<div class="item">
Entretenimento
</div>
<div class="item">
Stack Overflow
</div>
<div class="item">
Super User
</div>
<div class="item">
Stack Exchange
</div>
<div class="item">
C#
</div>
<div class="item">
asp.net
</div>
<div class="item">
asp.net-mvc
</div>
</div>