"overflow-x:hidden" one side only?

Question

Is it possible to hide the horizontal overflow of an element on one side only: left or right? Something like overflow-x-right:hidden;. I am open to css and jquery based tips.

Answer 1

This is how you could do it using clip-path, which replaced the deprecated clip property:

.outer {    background-color: rgba(0,0,255,.5);    width: 100px;    height: 100px;    margin: 100px;    clip-path: inset( -100vw -100vw -100vw 0 );  }    .inner {    background-color: rgba(255,0,0,.5);    width: 200px;    height: 80px;    position: relative;    top: 10px;    left: -50px;  }

<div class="outer">    <div class="inner"></div>  </div>

Note that, as of December 2017, browser support isn't very good.

Further reading:

• MDN: clip-path
• CSS-Tricks: clip-path