JSFiddle - React, Tailwind, and code Playground

by Lukis

HTML

<div id="case1">img_list - percentage height, container - overflow:auto
<div id="container">
   <div id="img_list">
      <div class="img_wrapper"><img src="http://lorempixel.com/110/180" /></div><div class="img_wrapper"><img src="http://lorempixel.com/100/100" 
/></div><div class="img_wrapper"><img src="http://lorempixel.com/80/120" 
/></div><div class="img_wrapper"><img src="http://lorempixel.com/110/180"
/></div><div class="img_wrapper"><img src="http://lorempixel.com/100/100"
/></div><div class="img_wrapper"><img src="http://lorempixel.com/80/120" /></div>
                
   </div>
</div>
</div>

<div id="case2">img_list - percentage height, container - overflow is not set
<div id="container">
   <div id="img_list">
      <div class="img_wrapper"><img src="http://lorempixel.com/110/180" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/100/100" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/80/120" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/110/180" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/100/100" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/80/120" /></div>
                
   </div>
</div>
</div>

<div id="case2">img_list - pixel fixed height, container - overflow:auto
<div id="container">
   <div id="img_list">
      <div class="img_wrapper"><img src="http://lorempixel.com/110/180" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/100/100" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/80/120" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/110/180" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/100/100" /></div>
      <div class="img_wrapper"><img src="http://lorempixel.com/80/120" /></div>
                
   </div>
</div>
</div>

CSS

#case2 {
    margin-top:26%;
}
#case3 {
    margin-top:53%;
}
#container {
    position:absolute;
    display:block;
    height:25%;
    width:100%;
    border:1px solid black;
}
#img_list {
    display:block;
    height:75%;
    width:1500px;
}
.img_wrapper {
    display: inline-block;
    float: left;
    background:cyan;
    }

.img_wrapper img {
     height: 100%;
    }
#case1 #container {
    overflow-x:auto;
    overflow-y:hidden;
}
#case1 .img_wrapper {
    height:100%;
}
#case2 #container {
}
#case2 .img_wrapper {
    height:100%;
}
#case3 #container {
    overflow-x:auto;
    overflow-y:hidden;
}
#case3 .img_wrapper {
    height:50px;
}