Introduction
The overflow
CSS property is widespread when constructing a web site. It’s used for various functions:
- Allow vertical scrolling (e.g.,
overflow-y: auto
) - Clip the content material of a wrapper (e.g.,
overflow-x: hidden
)
Suppose now we have a wrapper with the next CSS:
.wrapper {
overflow-y: hidden;
}
Beneath the hood, the browser will add overflow-x: auto
by default, leading to clipping on each the horizontal and vertical sides..
Attempt altering the overflow-y
to hidden
within the following demo:
Writer types
:
}
Browser computed types
.wrapper {
overflow-x: seen;
overflow-y: seen;
}
The dimmed type comes from the browser’s computed types.
Discover that the computed type of overflow-x
will change into auto
, clipping each side. However why is that?
Within the CSS Overflow Module Degree 3 spec, it says the next:
The seen/clip values of overflow compute to auto/hidden (respectively) if one among overflow-x or overflow-y is neither seen nor clip.
If the overflow-y
worth is clip
, the overflow-x
will stay as is (seen
). Meaning we will clip on one aspect of a container.
The issue with overflow: hidden
When the overflow
is about to hidden
on one axis, say overflow-y
, the opposite axis overflow-x
will change into auto
by default, leading to clipping each side.
This conduct isn’t all the time desired. In some circumstances, we wish clipping on just one axis.
Moreover, the opposite axis will change into scrollable, which can result in surprising outcomes.
Utilizing overflow: clip
That is the place the clip
worth turns into useful. It’s supported by all main browsers in accordance with CanIUse.
Within the following instance, I set overflow-y
to clip
. The overflow-x
worth will keep as is (seen
). Now the clipping occurs solely on the y-axis.
Writer types
:
}
Browser computed types
.wrapper {
overflow-x: seen;
overflow-y: seen;
}
The dimmed type comes from the browser’s computed types.
Attention-grabbing, proper? That’s how the clip
worth works with overflow
.
Use circumstances for overflow: clip
Listed here are a couple of sensible examples of overflow :clip
in motion.
Hero part
The clip
worth is particularly helpful in hero sections with massive function photographs
Within the following determine, now we have a picture that shouldn’t be constrained by its wrapper width. As an alternative, the picture must be displayed with its authentic facet ratio and let the browser crop as wanted.
The HTML:
<div class="hero">
<div class="hero-content"></div>
<div class="hero-thumb">
<img src="hero.png" alt="" />
</div>
</div>
The format CSS:
.hero {
show: grid;
grid-template-columns: 1fr 1.5fr;
hole: 1rem;
}
Beneath the hood, the format appears like this. The function picture is overflowing the Thumb grid merchandise (its container).
See the next demo, I added a top level view for every grid merchandise. Attempt to toggle the Present overflow
checkbox and see what occurs.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, dolor necessitatibus. Quisquam quis assumenda nulla commodi veritatis cumque natus dolorum nobis est neque.
That is what the picture appears like. If we add overflow-x: hidden
to the .hero
part, the picture will probably be clipped from the horizontal and vertical sides.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, dolor necessitatibus. Quisquam quis assumenda nulla commodi veritatis cumque natus dolorum nobis est neque.
To repair that, we have to use overflow-x: clip
as a substitute. The clipping will solely occur on the horizontal axis.
.hero {
overflow-x: clip;
}
Attempt it under within the following demo.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, dolor necessitatibus. Quisquam quis assumenda nulla commodi veritatis cumque natus dolorum nobis est neque.
We achieved a consequence that isn’t doable with out utilizing the clip
worth.
Single-direction clip
On this instance, now we have a ornament factor on each the left and proper sides. A round button is centered on the backside.
Some content material will reside right here
Nature refresh
An exploration on how I redesigned my weblog. An exploration on how I redesigned my weblog. An exploration on how I redesigned my weblog.
Some content material will reside right here
<div class="container">
<h1 class="title">Nature refresh</h1>
<p class="description"></p>
<a href="/why" class="button">Why?</a>
<img class="decor begin" src="decor.svg" alt="" />
<img class="decor finish" src="decor.svg" alt="" />
</div>
How can we clip the sample on the left and proper with out affecting the button?
Utilizing clip
restricts clipping to the horizontal aspect solely.
.hero {
overflow-x: clip;
}
Attempt it within the demo under:
Some content material will reside right here
Some content material will reside right here
Clipping a component bigger than its mother or father
On my web site dwelling web page, there’s a part I referred to as “The Hats”.
In there, my photograph is in a fixed-width wrapper. In one of many hats, I wanted to put a big round visible impact and reduce it on the vertical aspect solely.
The issue is that the kid is bigger than the wrapper factor. See the next determine:
However..why didn’t you simply make the wrapper larger? I wanted it to work properly on cell with out altering sizes and I considered utilizing clip
for that.
.hats-item {
overflow-y: clip;
}
Play with the next demo to see it in motion:
Within the following instance, now we have web page header with the next:
- title
- description
- thumbnail
The content material is pushed to the underside to overlap with the web page header’s boundaries. The thumbnail is positioned on the far proper and must be clipped if there may be not sufficient house on the proper aspect.
Right here is the design:
Within the following determine, I highlighted the picture (that must be clipped horizontally) and the content material that must be seen.
Within the following demo, the default worth for overflow-x
is seen
. Attempt to change it to hidden
or clip
and see what occurs.
The way it works?
Learn the way pizza-making works on this step-by-step information. We’ll stroll you thru the whole lot from the fundamentals to superior methods.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium nulla officiis vero, animi advert atque velit, adipisci iusto voluptate debitis placeat culpa libero error doloribus quibusdam iste! Error, ducimus quo.
This isn’t doable with out clip
until we add a wrapper (a hack!).
Scroll-driven animations
Whereas utilizing CSS scroll-driven animations, you would possibly want to make use of overflow: hidden
to clip the content material of a container. Nonetheless, this works towards scroll-driven animations.
Utilizing overflow: hidden
will outline a scroll container. To keep away from that, we will use overflow: clip
as a substitute. Within the demo under, the cat is meant to animate from left to proper, however it’s not working as anticipated.
Change the overflow
worth to clip
and see what occurs.
Take a look at this text by Bramus for extra particulars about why utilizing clip
is the answer when utilizing scroll-driven animations.
The overflow-clip-margin property
When utilizing the clip
worth, we will add a margin to regulate when the browser paints the factor’s content material after clipping.
To do this, we have to use the overflow-clip-margin
property.
Within the following demo, attempt to play with the slider and spot what occurs:
overflow-y: clip
overflow-clip-margin: 0px
By growing the worth of overflow-clip-margin
, the boundaries of the clipped space elevated.
Within the above instance, I showcased how the clip margin works by exhibiting it on the vertical axis solely. We will clip on one axis or each.
The help for overflow-clip-margin
is incomplete and totally different between browsers:
- In Chrome, it really works provided that each axes are clipped (e.g:
overflow: clip
) - In Firefox, it really works tremendous if we clip one axis solely. Nonetheless, we will solely use a size worth.
Improve margin for an inventory of tags
This instance is impressed by this demo by Helen Chong.
The concept is that we have to add an define
on hover and focus. I added overflow-x: clip
to keep away from content material overflow if one of many tags is just too lengthy.
.tags-list {
show: flex;
flex-wrap: wrap;
hole: 0.5rem;
overflow-x: clip;
}
Hover over the primary tag to see the impact.
Let’s take a more in-depth look:
We will repair that by utilizing overflow-clip-margin
on the mother or father.
.tags-list {
overflow-x: clip;
overflow-clip-margin: 4px;
}
Within the following demo, improve the slider and spot how the define is seen as anticipated.
Attempt hovering over the tag at every increment to see how the define begins to look.
overflow-x: clip
overflow-clip-margin: 0px
Helpful, proper?
Nested border radius
Right here’s an attention-grabbing method to utilizing overflow-clip-margin
for implementing a nested border radius by Adam Argyle.
.card {
overflow: clip;
overflow-clip-margin: content-box;
}
This works in Chrome solely on the time of writing this text.
Conditionally present nook spotlight
We need to conditionally add an ornamental factor at among the corners.
By default, the ornamental parts are exterior the container boundaries:
.card {
overflow: clip;
&:earlier than {
left: -8px;
prime: -8px;
}
&:after {
proper: -8px;
backside: -8px;
}
}
On this instance, I need to present the ornamental parts if the part comprises a picture.
.card:has(img) {
overflow-clip-margin: 10px;
}
Play with the slider and see how the weather are proven.
overflow-x: clip
overflow-clip-margin: 0px
Be at liberty to disregard this use case for those who assume it’s ineffective.
Additional sources
Conclusion
The clip worth could be helpful in sure circumstances, as outlined on this article. Though it’s comparatively new, it’s well-supported throughout all main browsers. I hope you discovered this text useful and that you just’ll think about using clip in your tasks.