Only hide CSS overflow on a single x or y axis, or ignore it

Principally ‘overflow: hidden’ works as you would expect. Once set to a parent, child content can’t overflow the bounds set by the parent.

<style>
    .container {
	height: 50px;
	width: 50px;
	overflow: hidden;
    }
</style>

<div class="container">
    <p>I can't overflow the bounds of the container</p>
</div>

Using overflow-x and overflow-y is a little more ambiguous.

Let’s assume that we have an element with class ‘.container’. We want the container to have a fixed height of ’50px’ and a fixed width of ’50px’.

<style>
    .container {
	height: 50px;
	width: 50px;
	background-color: grey;
    }
</style>

<div class="container">
    <p>I want my content to overflow on the Y axis only. Overflowing content shouldn't be visible on the X axis.</p>
</div>

In this example we want the text to overflow on the Y axis but not on the X axis. We can fix the X axis overflow by adding ‘overflow-x: hidden’ but by doing so overflow-y becomes assumed as ‘auto’.

No problem, right? Now we just set ‘overflow-y: visible’…

<style>
    .container {
	height: 50px;
	width: 50px;
	background-color: grey;

	overflow-x: hidden;
	overflow-y: visible;
    }
</style>

<div class="container">
    <p>I want my content to overflow on the Y axis only. Overflowing content shouldn't be visible on the X axis.</p>
</div>

fiddle

… Bugger, ‘overflow-x: hidden’ and ‘overflow-y: visible’ can’t be used in combination.

CSS overflow on one axis only

In the example above we still want to overflow our element on the Y axis but not on X. How do we get around the problem?

We now know that if we set overflow to ‘hidden’ on a single axis that the second axis is going to be assumed. So, by restricting the height of the container we are forcing the Y overflow condition to be used, which is either set to ‘auto’, ‘scroll’ or ‘hidden’ when ‘overflow-x: hidden’ is set.

The solution is simple, if not a little bit hacky. Wrap the container in another div.

<style>
    .wrapper {
	height: 50px;
	width: 50px;
	background-color: grey;
    }

    .container {
	width: 50px;
	overflow-x: hidden;
    }
</style>

<div class="wrapper">
    <div class="container">
        <p>I want my content to overflow on the Y axis only. Overflowing content shouldn't be visible on the X axis.</p>
    </div>
</div>

fiddle

By moving the height restriction and background colour to the wrapper, but keeping the width and X axis overflow restrictions on the container, we have created the overflow effect we were after.

Escaping CSS overflow of parent or ancestor

This is perhaps an easier concept to grasp than the last one.

<style>
    .prison {
        width: 50px;
	height: 50px;
	overflow: hidden;
    }
</style>

<div class="prison">
    <p>Prisoner 1</p>
    <p>Prisoner 2</p>
</div>

In our new example we have 2 elements inside a prison. The prison has constrained width and height and is set to ‘overflow: hidden’. We want prisoner 2 to escape!

To escape prisoner 2 we can give it an absolute position.

<style>
    .prison {
	width: 50px;
	height: 50px;
	overflow: hidden;
    }

    .escape {
        position: absolute;
    }
</style>

<div class="prison">
    <p>Prisoner 1</p>
    <p class="escape">Prisoner 2</p>
</div>

fiddle

The absolute position will assume relative location and overflow from the nearest ancestral parent with relative positioning. In the case of the example, this is the document.

If we change the position of the prison to ‘relative’ then the prisoner can’t escape.

Hope it helps!