Line break control does not work "white-space: nowrap:"

Question

I don’t know where I’m going wrong, but at 5° numerical sequence bar, you don’t want to line up linear, even if you give it a float:left; and a "nowrap" because I want to add a lower scroll bar to the content, but only the sidebar is added, if I increase the width of the main div therefore there will be no line break, but the bottom scroll bar is not displayed, as I do to display a lower slider as defined in the div. menu,??

body{background-color:#6C9;}
.menu{ overflow:auto;
  white-space: nowrap; 
  width:500px;  
  height:300px; 
}
.menu > div{ float:left; 
  height:340px; 
  margin-left:5px; 
  width:100px; 
  background-color:#FFF;
}

<div class="menu">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>


</div>

Answer 1

Replace the float:left for display:inline-block on internal Ivs

body{
    background-color:#6C9;
}
.menu { 
  overflow:auto;
  white-space: nowrap; 
  width:500px;  
  height:300px; 
}
.menu > div { 
  display: inline-block; 
  height:340px; 
  margin-left:5px; 
  width:100px; 
  background-color:#FFF;
}

<div class="menu">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

Answer 2

use this css:

body{background-color:#6C9;} .menu{ overflow:scroll; white-space: nowrap; width:500px;
height:300px; } .menu > div{ display:inline-block; height:340px; margin-left:5px; width:100px; background-color:#FFF; }

the problem was with the float that leaves everyone to the left side.