two questions in the example below:

• why grida is not centered horizontally -margin: 0 auto
• why cins is not fully visible - parent is overflow-x:visible

.grida{
display:grid;
grid-template-columns:99px 140px 99px;
margin:0 auto;
background:lightblue;
}

.gridab{
overflow-y:scroll;
}

.gridaa, .gridac{
height:150vh; overflow-y:scroll; overflow-x:visible;
background:silver;
position:relative;
}
.cins{
position:absolute;
right:-54px; top:25px; width: 200px;
height:70vh; background:orange;

}

<div class='grida'>
<div class='gridaa'></div>
<div class='gridab'></div>
<div class='gridac'>
<div class='cins'></div>
</div>
</div>

CodePudding user response：

why grida is not centered horizontally -margin: 0 auto

It is centered. But it takes up the whole width, setting the width to 338px (99px 140px 99px) you see that it is centered.

why slide is not fully visible - parent is overflow-x:visible

You are using a grid layout, and you have defined exact width for 3 columns of 99px 140px 99px. Those dimensions are strictly respected. Also the .cins element is positioned as absolute and the parent would not detect the width of the contained element anyway (it works like this).

.grida {
  display: grid;
  grid-template-columns: 99px 140px 99px;
  margin: 0 auto;
  
  background-color: red;
  width: 338px;
  padding: 20px;
}

.gridaa,
.gridac {
  height: 150vh;
  overflow-y: scroll;
  overflow-x: visible;
  background: silver;
  position: relative;
}

.cins {
  position: absolute;
  display:inline-block;
  right: -54px;
  top: 25px;
  width: 200px;
  height: 70vh;
  background: orange;
}

<div class='grida'>
  <div style="background-color:pink">99px</div>
  <div style="background-color:yellow">140px</div>
  <div style="background-color:green">99px</div>
</div>
<div class='grida'>
  <div class='gridaa'></div>
  <div class='gridab'></div>
  <div class='gridac'>
    <div class='cins'></div>
  </div>
</div>

CodePudding user response：

why grida is not centered horizontally -margin: 0 auto

grida is the full viewport width, so centering it horizontally within the viewport is sort of nonsensical.

why slide is not fully visible - parent is overflow-x:visible

The horizontal overflow doesn't work because the vertical overflow is scroll. According to MDN, for overflow-x:

If overflow-y is hidden, scroll or auto and this property is visible, it will implicitly compute to auto.

If you inspect the element in the browser dev tools and look at the computed style you'll see that overflow-x has resolved to auto, and auto gives you a horizontal scrollbar.