child bigger than parent

by Hugo Vale Pereira

HTML

<div class="wrapper">
  <div class="mae">
    <div class="pai">
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
      <div class="a"></div>
    </div>
  </div>
</div>

SASS

// https://stackoverflow.com/a/32539527/15048932

*
  box-sizing: border-box
  
.wrapper
  position: relative
  width: 100%
  height: 300px
  z-index: 0
  background: pink
  
  overflow: hidden // evita que as margens do filho afetem a posição do pai
  // o display: flow-root tb podeter influencia- -> https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
 
  
div.mae
  //position: relative // Desnecessário
  width: 400px
  height: 200px
  border: 4px solid black
  //background: pink
 
  margin: 50px 10px
  pointer-events: none

 
div.pai
  position: absolute // Para este puder ser absolute. o .mae não pode ser relative. para não ser em relação a esse
  display: flex
  align-items: center
  gap: 10px
  inset: 0
  
  background-color: blue
  overflow: scroll
  z-index: -23
  pointer-events: all
  
  padding-left: 40px
  
  
  .a 
    flex: 0 0 100px
    width: 100px
    height: 100px
    background: red