Skip to content

Instantly share code, notes, and snippets.

@Chrisedmo
Created February 18, 2013 12:02
Show Gist options
  • Save Chrisedmo/4976885 to your computer and use it in GitHub Desktop.
Save Chrisedmo/4976885 to your computer and use it in GitHub Desktop.
Overflow scroll horizontal - No FlexBox
/**
* Overflow scroll horizontal - No FlexBox
*/
.container {
width:100%;
height: 220px;
border: 3px dotted;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
ul {
max-width: 99999px;
width: 500%;
list-style: none;
margin: 0;
padding: 0;
/*display: -webkit-box;*/
}
li {
border: 1px solid red;
width: 300px;
height: 200px;
background: hsla( 0, 100%, 50%, 0.1 );
float: left;
}
<!-- content to be placed inside <body>…</body> -->
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment