child bigger than parent

by Hugo Vale Pereira

HTML

<div class="wrapper">
  <div class="mae">
    <h1>Hugo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque, neque ducimus dicta fugiat quos itaque exercitationem odio ipsa eligendi. Incidunt magnam earum, molestiae iste, porro ut laboriosam ad officia.</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque, neque ducimus dicta fugiat quos itaque exercitationem odio ipsa eligendi. Incidunt magnam earum, molestiae iste, porro ut laboriosam ad officia.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem atque, neque ducimus dicta fugiat quos itaque exercitationem odio ipsa eligendi. Incidunt magnam earum, molestiae iste, porro ut laboriosam ad officia.</p>
    <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
  padding-right: 100px
  pointer-events: none
  
  overflow-y: scroll

 
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: -1
  pointer-events: all
  
  padding-left: 40px
  
  
  .a 
    flex: 0 0 100px
    width: 100px
    height: 100px
    background: red