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__titleh3 Title
  .hr.canvasInfo__block.canvasInfo__block2.canvasInfo__slider sliderBar
      .canvasInfo__activity Motion activity
      .row.circlespan line1
      .row.circlespan line2
        .grayBlock hi2
      .row.circlespan line3
      .row.circlespan line4
      .row.circlespan line5

CSS:

.canvasInfo {
  margin: 0 auto;
  width: 500px;
}

.hr {
  margin: 10px0;
  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: 0px0px2px#000;
  span {
    margin-left: 20px;
  }
}