06-basic-visual-formatting/overflow-x-y.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Setting overflow separately for x and y</title>
<style type="text/css">
body {width: 55em;}
#contain {display: flex; justify-content: space-between; flex-wrap: wrap;}
b {width: 30%; font: 700 1.25em Consolas, Open Sans; padding-bottom: 1ch; text-align: center;}
div.sidebar {width: 30%; height: 7em; background: rgba(216,128,0,0.33); color: rgba(0,0,0,0.5);
	font: bold italic x-large sans-serif;}
#contain > div:nth-of-type(1) {overflow-x: scroll; overflow-y: hidden;}
#contain > div:nth-of-type(2) {overflow-x: hidden; overflow-y: scroll;}
#contain > div:nth-of-type(3) {overflow-x: scroll; overflow-y: scroll;}
</style>
</head>
<body>


<div id="contain">
<b>overflow-x: scroll; overflow-y: hidden;</b>
<b>overflow-x: hidden; overflow-y: scroll;</b>
<b>overflow-x: scroll; overflow-y: scroll;</b>

<div class="sidebar">This is an element that’s only 7em tall.  Any overflowing content won’t be visible outside the boundaries of the element box, whether or not that’s what the author really wanted.</div>
<div class="sidebar">This is an element that’s only 7em tall.  Any overflowing content won’t be visible outside the boundaries of the element box, whether or not that’s what the author really wanted.</div>
<div class="sidebar">This is an element that’s only 7em tall.  Any overflowing content won’t be visible outside the boundaries of the element box, whether or not that’s what the author really wanted.</div>

</div>

</div>

</body>
</html>