Overflow Clip

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:

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.

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.

Weblog Redesign Case Examine

An exploration on how I redesigned my weblog.

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.

Weblog Redesign Case Examine

An exploration on how I redesigned my weblog.

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.

Weblog Redesign Case Examine

An exploration on how I redesigned my weblog.

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.

<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:

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:

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.

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.

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.