Below is the snippet:

```css
.out {
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background-color: green;

}

.in {
    width: 50%;
    height: 50px;
    background-color: red;
    transform: translate3d(-20%, -40%, 0px) scale(0.7);
    position: absolute;

}
```

```html
<div class="out">
    <div class="in">
    </div>

</div>
```

As can be seen, the inner element (red square) goes out of the border/bound of the outer element (green square).

Does anyone have ideas about how to clip the part of inner element which goes out of the border of the outer element?

--

I find `overflow: hidden` doesn't work well because of the `position: absolute` property in the inner element..