如何解决溢出中溢出内容的自动切割：auto？ [英] How to work around the automatic cutting of the overflown content in overflow: auto?

问题描述

在 overflow：auto 中有一个绝对定位的div，如下所示：

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

正如您所见，由于溢出，灰色块被切断：auto 。

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

解决方案

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

overflow：auto 肯定会被切断，你不能对它做任何事情，但是它不会很糟糕，因为它足够宽内部 canvasInfo__block2 以及从中溢出的灰色块。

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

结果：

HTML：

  .canvasInfo 
 .canvasInfo__title 
 h3标题
 .hr 
 .canvasInfo__block 
 .canvasInfo__block2 
 .canvasInfo__slider sliderBar 
 .canvasInfo__acti vity Motion活动
 .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纯红色; 
} 
 
 .canvasInfo__block {
 position：relative; 
溢出：auto; 
 width：400px; 
 height：120px; 
 border：2px纯红色; 
} 
 
 .canvasInfo__block2 {
 position：relative; 
溢出：可见; 
 height：300px; 
 width：300px; 
 margin-left：auto; 
 margin-right：auto; 
 border：2px纯蓝色; 
} 
 
 .grayBlock {
 width：50px; 
 height：50px; 
 background-color：gray; 
位置：绝对; 
 top：0px; 
 left：-20px; 
 z-index：-1; 
} 
 .row {
 border：1px solid gray; 
职位：亲属; 
} 
 .circle 
 {
 position：relative; 
 width：10px; 
 height：10px; 
 display：inline-block; 
 border-radius：60px; 
 box-shadow：0px 0px 2px＃000; 
 span {
 margin-left：20px; 
} 
} 
  

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 gray block is cut off due to the overflow: auto.

I want it to escape the container. What can I do?

解决方案

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

这篇关于如何解决溢出中溢出内容的自动切割：auto？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！