溢出绝对元素在网格项内不可见

Question

我有1 x 6网格。我想在悬停网格项时显示调整大小句柄。为此，我在网格项目中有2个圆形绝对定位的div。我放在物品两侧的边缘中间。我希望这两个手柄放在网格边缘的一半半内。这是代码片段。我需要溢出：auto for grid item以防止网格项扩展以容纳其内容。

提前致谢。

＆＃13;

＆＃13;

.wrapper{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 10px;
}

.item{
  position: relative;
  background: lightyellow;
  border: 2px dashed transparent;
  overflow: auto;
}

.item:hover{
  border-color: #333;
  padding: 10px;
}

.round{
  position: absolute;
  height: 15px;
  width: 15px;
  border-radius: 50px;
  border: 1px solid #333;
  top: calc(50% - 7.5px);
  background: lightgreen;
}

.round:nth-child(1) {
    left: -7.5px !important;
}

.round:nth-child(2){
  right: -7.5px;
}

＆＃13;

<div class="wrapper">
  <div class="item span2">
    <div class="round"></div>
    <div class="round"></div>
    <p>This is the text of the box. This box will grow to fit the content if i remove the overflow. But i dont want this behaviour. So i am setting overflow to auto. But i want that two rounded green box to fit on half inside and half outside of box. Now it is another half is not visible. </p>
  </div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用固定位置和空转换技巧：

＆＃13;

＆＃13;

.wrapper{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  grid-gap: 10px;
  transform:translate(0,0);
}

.item{
  position: relative;
  background: lightyellow;
  border: 2px dashed transparent;
  overflow: auto;
}

.item:hover{
  border-color: #333;
  padding: 10px;
}

.round{
  position: fixed;
  height: 15px;
  width: 15px;
  border-radius: 50px;
  border: 1px solid #333;
  top: calc(50% - 7.5px);
  background: lightgreen;
}

.round:nth-child(1) {
    left: -7.5px !important;
}

.round:nth-child(2){
  left: calc((100% / 6) - 17.5px);
}

＆＃13;

<div class="wrapper">
  <div class="item span2">
    <div class="round"></div>
    <div class="round"></div>
    <p>This is the text of the box. This box will grow to fit the content if i remove the overflow. But i dont want this behaviour. So i am setting overflow to auto. But i want that two rounded green box to fit on half inside and half outside of box. Now it is another half is not visible. </p>
  </div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;