如何解決溢出中溢出內容的自動切割：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; 
    } 
}