如何解决溢出中溢出内容的自动切割：auto？

Question

我有一个overflow: auto内的绝对定位的div，如下：

有5行与相对位置的div，我有一个.grayBlock行2格内。

正如您所见，由于overflow: auto，灰色块被切断。

我想让它逃离容器。我能做什么？

Answer 1

您可以在当前环境中构建额外的canvasInfo__block。它应该比内部块更宽一些（在我的例子中为canvasInfo__block2）。

的overflow: auto肯定会削减，你不能对它做任何事，但它不会很糟糕，因为它是足够宽，以包含内部canvasInfo__block2，也是灰色块从中溢出。

canvasInfo__block2需要一个overflow: visible，而外部的canvasInfo__block可以得到它的overflow: auto。

结果：

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