How to implement overflow: hidden without using overflow: hidden?

A very interesting topic. How can I implement overflow: hiddenwithout using overflow: hidden ?

CSS overflowdefines what to do when an element's content is too large to fit in a block-level formatting context. and overflow: hiddenwill clip content that is beyond the bounds of the container.

Controls the direction of overflow: hidden

This is derived from a practical requirement. In a certain requirement, the content in the container is required to be clipped if it exceeds the container in the vertical direction, and will not be clipped if it exceeds the container in the horizontal direction. Something like this:

Interesting, of course, the first solution that comes to mind is to apply a layer of parent elements in addition to the above yellow background element itself, and then the parent element is the one withoverflow: hiddenset and the scope of the parent element is the actual scope to control whether to clip. Something like this:

The actual parent element is the one withoverflow: hiddenset.

Of course, the reality is not that simple.

But if the element is inside a complex layout flow, then there may not be as much room for us to nest another layer of containers.:

Similar to the above picture, it is still the middle yellow element, and only the vertical direction is required to exceed the crop. At this point, wrapping the parent element is no longer so easy to cast. So, we need to find another way.

clip-pathCrop with

OK, this can go into the text. In CSS, besides overflow: hidden, there are other properties that can also achieve clipping beyond the container area. clip-pathIt is one of the best.

Using clip-path, we can easily control cropping in any direction. The above requirements can be solved as follows:

<div class="g-container"> 
  <div class="sub"></div> 
</div>

The key CSS code is as follows:

.g-container {
     width: 200px ;
     height: 200px ;
     clip-path : polygon(-1000% 0 ,1000% 0, 1000% 100%, -1000% 100%);
}

Here is used clip-path: polygon()to crop a rectangular area, and clip-paththe feature of supporting negative coordinates is used, and the starting point of the crop is set far away from the coordinates to draw a large rectangular shape. Schematic:

In this way, we can draw any desired range within overflow: hiddenthe .

You can click into the Demo and try it out:

CodePen — Clip-path overflow

Two more examples:

{
    // Crop out the area with overflow:hidden on the left and right sides , and no overflow :hidden on the top and bottom
    clip-path: polygon (0-1000%, 100%-1000% ,100% 1100%, 0 1100%);
   // Crop out the area with overflow: hidden on the left, top, and right , and no overflow : hidden on the bottom
    clip-path: polygon (100% 0, 100% 1000%, 0 1000%, 0 0);
}

Of course, in the above code 1000%is very flexible, you can control it yourself, it is enough.

Non-overflow, clip-path clipping method

So. Through a small example above, we know that the overflowregion clip-pathcan be cropped. So in addition to these two, are there any elements in CSS that can perform area clipping?

Yes, there is another interesting element, which is — contain.

containAttributes allow us to specify a specific DOM element and its children, allowing them to be independent of the entire DOM tree structure. The purpose is to give the browser the ability to redraw and reflow only some elements without having to target the entire page each time.

I will not introduce each of its properties in detail here. If you are interested, you can read this article — the new CSS feature contains, which controls the redraw and reflow of the page

contain: paintContent cropping

Specifically contain: paint, contain: paintan enable layout restrictions , that is, the child elements of this element will not be displayed outside the bounds of this element.

contain: paintThe purpose of the attribute is to speed up the rendering of the page, and elements are not rendered in non-essential areas. Therefore, if an element is not on screen or otherwise set to be invisible, its descendants are invisible and not rendered.

.g-container {
   contain: paint;
}

Take a look at the example:

CodePen Demo — contain: paint DemoClick to preview

contain: paintside effects

contain: paintThe original intention is to improve the rendering of the page, and the elements that are clipped outside the container are not rendered. But using it has some side effects:

1. It will generate a new stacking context of its own (It becomes a stacking context), that is, it will change the reference of absolute positioning and fixed positioning of its children;
2. It becomes a new formatting context, that is, it means that the layout outside the element will no longer affect its children;

For more specifics, check out this article — CSS Containment in Chrome 52

Let’s explain the first point, it’s very interesting, it will generate a new stacking context of its own , that is, it will change the base of the position: fixedelement , it will make position: fixedthe element set to no longer be positioned relative to the viewport, and is positioned relative to the element. That is, degenerate into position: absolute.

Of course, this is not the focus of this article, I provide a Demo — contain: paint create a stacking contextClick to preview, will not continue here.

in conclusion

So far, this article provides 3 ways to achieve clipping beyond the scope of the container:

• overflow: hidden
• clip-pathdraw crop area
• contain: paintDon't draw content outside the element's bounds

Here are three more demo demos: CodePen Demo — Overflow Hidden In CSS

Of course, there are some differences between them:

1. overflow: hiddenand contain: paintwill create a BFC, it clip-pathwon't, it's just a mere crop
2. Differences Between Compatibility

So that is to say, CSS is not only overflow: hiddenimplemented overflow: hidden, but can be used flexibly in many cases.

A small test

In CSS-battle, we can apply this technique.

This website is the core gameplay: the official gives a graphic, on a given 400 x 300 canvas, the shorter the code can be used to implement it, the higher the score .

Last time I talked about a question that was implemented through a line of CSS code. Today, let’s take a look at the second question :

How to implement it with the shortest code? Think about what was said today clip-path.

First, we use this piece of code to generate such a graph:

<style>
body {
     margin: 0 50px;
     background: #62374e;
     border: 50px dashed #fdc57b;
}

Then, use clip-pathit to cut off the upper and lower parts.

< style > 
body {
     margin: 0 50px;
     background: #62374e;
     border: 50px dashed #fdc57b;
  + clip-path: polygon (0 50px, 100% 50px, 100% 250px, 0 250px);
}

This is perfect. Of course, the number of characters is a bit high now, there are 158 characters. In fact, there is a more convenient syntax for cropping the rectangular area. clip-pathThe above clip-path:polygon(0 50px, 100% 50px, 100% 250px, 0 250px)can be replaced clip-path:inset(50px 0)by 20 characters.

Of course, a little more brute force, we can also achieve this in one line:

<body bgcolor=62374e style=margin:0+50;border:dashed+50px#fdc57b;clip-path:inset(50px+0>

Of course, there may be some syntax that is only allowed by this website, but the core implementation still lies in clip-pathcutting off the redundant part with

Finally

All in all, I hope it will help you :)

More wonderful CSS technical articles are summarized in my Github — iCSS .