flex scroll

by jpeter06

HTML

<div id="main">
  <div id="container">
    <div class="child">
    A
    </div>
    <div class="child">
    B
    </div>
    <div class="child">
    C
    </div>
  </div>
</div>

CSS

html, body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  overflow:hidden;
  background:red;
  box-sizing: border-box;
}
#main{
  position:relative;
  height:100vh;
  background:tan;
  z-index:2;
  display:flex;
  overflow-y:auto;
  border:18px solid gray;
  box-sizing: border-box;
  aalign-items: center; /** culpable **/
  /** problema de scroll --> https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container */
  justify-content: center;
}

#container{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  padding:10px;
  background:red;
  box-sizing: border-box;
  gap:10px;
  margin:auto; /** solución **/
  justify-content: center;
}
.child{
  
  height:300px;
  width:100px;
  padding:20px;
  background:green;
  border: 10px solid orange;
  box-sizing: border-box;
}