Skip to content

Instantly share code, notes, and snippets.

@miphe

miphe/index.html

Last active December 22, 2015 04:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save miphe/6421189 to your computer and use it in GitHub Desktop.
Save miphe/6421189 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!--
Overflow properties, example.
http://overflow.miphe.com/index.html
-->
<html>
<head>
<style>
.box {
position: relative;
float: left;
height: 200px;
width: 300px;
border: 2px solid green;
margin: 30px;
padding: 10px;
background-color: beige;
}
.not-ok {
border-color: red;
}
.box-1 {
overflow-x: visible;
overflow-y: visible;
}
.box-2 {
overflow-x: auto;
overflow-y: visible;
}
.box-3 {
overflow-x: visible;
overflow-y: hidden;
}
.box-4 {
overflow-x: hidden;
overflow-y: auto;
}
.box-5 {
overflow-x: hidden;
overflow-y: visible;
}
.box-6 {
overflow-x: hidden;
overflow-y: scroll;
}
.box-7 {
overflow-x: visible;
overflow-y: auto;
}
.box-8 {
overflow-x: visible;
overflow-y: hidden;
}
.box-9 {
overflow-x: visible;
overflow-y: scroll;
}
.subject {
background-color: #999;
width: 350px;
height: 200px;
}
#container {
width: 1200px;
}
</style>
</head>
<body>
<div id="container">
<div class="box box-1">
<p>OK!</p>
<pre class="subject">
overflow-x: visible;
overflow-y: visible;
</pre>
</div>
<div class="box box-2 not-ok">
<p>NOT OK!</p>
<pre class="subject">
overflow-x: auto;
overflow-y: visible;
</pre>
</div>
<div class="box box-3 not-ok">
<p>NOT OK!</p>
<pre class="subject">
overflow-x: visible;
overflow-y: hidden;
</pre>
</div>
<div class="box box-4">
<p>OK!</p>
<pre class="subject">
overflow-x: hidden;
overflow-y: auto;
</pre>
</div>
<div class="box box-5 not-ok">
<p>NOT OK!</p>
<pre class="subject">
overflow-x: hidden;
overflow-y: visible;
</pre>
</div>
<div class="box box-6">
<p>OK!</p>
<pre class="subject">
overflow-x: hidden;
overflow-y: scroll;
</pre>
</div>
<div class="box box-7 not-ok">
<p>NOT OK!</p>
<pre class="subject">
overflow-x: visible;
overflow-y: auto;
</pre>
</div>
<div class="box box-8 not-ok">
<p>NOT OK!</p>
<pre class="subject">
overflow-x: visible;
overflow-y: hidden;
</pre>
</div>
<div class="box box-9 not-ok">
<p>NOT OK!</p>
<pre class="subject">
overflow-x: visible;
overflow-y: scroll;
</pre>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment