JSFiddle - React, Tailwind, and code Playground

by sebababi

HTML

the key is the     position:relative; in the level 1, so then level 2 with position:absolute, will not get out of the div.

<div class='listingContainer'>
    
    
 <div class='listing'>   
 
   <div class='level1'>
       Hello
       <div class='innerAbsolute'>inner2</div>
   </div>
    
    
   <div class='level1'>
       Hello
       <div class='innerAbsolute'>inner3</div>
   </div>

    
    
    
       
</div> 
</div>




<div class='level0' style="display:none;">
    
    
    
   <div class='level1'>
       Hello
   </div>
    
    
    
   <div class='level1'>
       Hello
       <div id='inner2'>inner2</div>
   </div>
    
    
   <div class='level1'>
       Hello
       <div id='inner3'>inner3</div>
   </div>

    
    
    
    
</div>

CSS

.listing {
  width: 105%;
  min-width:250px;
  height: 400px;
  overflow: auto;
  cursor: pointer;
  border:4px dashed #ff0099;
}
.listingContainer{

    padding:5px;
  width: 100%;
  min-width:240px;
  max-width:443px;
  height: 300px;
  overflow: hidden;
  cursor: pointer;
  border-bottom: 1px solid #C8C7CC;
}

.innerAbsolute {
   position: absolute;
   background: green;
}


.level0 {
   height:400px; 
   width: 500px;
   background:red;
    padding:4px;
    overflow:hidden;
}
.level1 {
   float:left;
   margin:2px;
   background: cyan;
    position:relative;
    height:350px;
    width:98%

}


#inner2 {
   position: absolute;
   background: blue;
    left:0px;
}

#inner3 {
   position: absolute;
   background: pink;
}