How to get around automatic cutting of overflowing content when overflowing: auto?

Question

I have an absolute div position inside overflow: auto , like here:

There are 5 lines of div with relative position, and I have .grayBlock inside line of 2 .grayBlock .

As you can see, the gray block is disabled due to overflow: auto .

I want him to leave the container. What can I do?

Answer 1

You can create an additional canvasInfo__block around the current one. It should be a little wider as an internal block (in my example, canvasInfo__block2 ).

overflow: auto probably cuts out, you can’t do anything with it, but it will not be very bad, because it is wide enough to contain the internal canvasInfo__block2 , as well as a gray block overflowing from it.

canvasInfo__block2 requires overflow: visible , and an external canvasInfo__block can get its overflow: auto .

Result:

HTML:

 .canvasInfo .canvasInfo__title h3 Title .hr .canvasInfo__block .canvasInfo__block2 .canvasInfo__slider sliderBar .canvasInfo__activity Motion activity .row .circle span line1 .row .circle span line2 .grayBlock hi2 .row .circle span line3 .row .circle span line4 .row .circle span line5 

CSS

 .canvasInfo { margin: 0 auto; width: 500px; } .hr { margin: 10px 0; border-bottom: 1px solid red; } .canvasInfo__block { position: relative; overflow: auto; width: 400px; height: 120px; border: 2px solid red; } .canvasInfo__block2 { position: relative; overflow: visible; height: 300px; width: 300px; margin-left: auto; margin-right: auto; border: 2px solid blue; } .grayBlock { width: 50px; height: 50px; background-color: gray; position: absolute; top: 0px; left: -20px; z-index: -1; } .row { border: 1px solid gray; position: relative; } .circle { position: relative; width: 10px; height: 10px; display: inline-block; border-radius: 60px; box-shadow: 0px 0px 2px #000; span { margin-left: 20px; } }