How To Work Around The Automatic Cutting Of The Overflown Content In Overflow: Auto?

I have an absolute positioned div inside an overflow: auto, as here: There 5 row divs with position relative, and I have a .grayBlock inside the row 2 div. As you can see, the gra

Solution 1:

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

The overflow: auto will surely cut, you can't do anything with it, but it won't be very bad because it is enough wide, to contain the internal canvasInfo__block2 and also the gray block overflowing from it.

canvasInfo__block2 needs an overflow: visible, while the external canvasInfo__block can get its overflow: auto.

The 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;
  }
}