poziome przewijanie elementu blokowanego w linii

Question

Mam divy w bloku, ale kiedy docierają do końca ekranu, przechodzą do następnej linii zamiast przewijać poziomo, czy ktoś może mi pomóc? o to fiddle

<div class="m_wrap"> 
<div class="dx"> 
    <div class="xc">1</div> 
    <div class="xc">2</div> 
    <div class="xc">3</div> 
    <div class="xc">4</div> 
    <div class="xc">5</div> 
    <div class="xc">6</div> 
    <div class="xc">7</div> 
    <div class="xc">8</div> 
    <div class="xc">9</div> 
    <div class="xc">10</div> 

    </div> 
    </div> 

CSS

.m_wrap{ 
width:100%; 
height:100px; 
} 
.dx{ 
    width:100%; 
height:100px; 
overflow:scroll; 
} 
.xc{ 
display:inline-block; 
width:100px; 
height:80px; 
border:1px solid; 
line-height:80px; 
text-align:center; 
margin-bottom:4px; 
} 

Answer 1

Zastosowanie white-space: nowrap; na dx klasie.

Fiddle

.dx{ 
    width:100%; 
    height:100px; 
    overflow:scroll; 
    white-space: nowrap; 
} 

Answer 2

Ukrywanie y nadmiaru i wykorzystanie nowrap

.dx { 
    height: 100px; 
    overflow-y: hidden; 
    white-space: nowrap; 
    width: 100%; 
} 

FIDDLE