Comment contourner la découpe automatique du contenu survolé en débordement: auto?

Question

j'ai une div positionné absolue à l'intérieur d'un overflow: auto, comme ici:

5 Il rangée divs avec position relative, et j'ai un .grayBlock dans la rangée 2 div. Comme vous pouvez le voir, le bloc gris est coupé à cause du overflow: auto.

Je veux qu'il s'échappe du conteneur. Que puis-je faire?

Answer 1

Vous pouvez construire un canvasInfo__block supplémentaire autour de celui en cours. Il devrait être un peu plus large que le bloc interne (dans mon exemple, canvasInfo__block2).

Le overflow: auto va sûrement couper, vous ne pouvez rien faire avec elle, mais il ne sera pas très mauvais, car il est assez large pour contenir la canvasInfo__block2 interne et aussi le bloc gris débordant de celui-ci.

canvasInfo__block2 a besoin d'un overflow: visible, tandis que le canvasInfo__block externe peut obtenir son overflow: auto.

Le résultat:

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