53004675

flex vertical stacking..

by Baliga

HTML

<div class="container">
<div class="flex-container">
  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img src="https://pro2-bar-s3-cdn-cf6.myportfolio.com/0d5a2028d7a7f8febf676a97648ea300/05851b218f8801ca2b106119_rw_1920.jpg?h=3e70946439d6e6326c1bd3efc5d20e51" alt="Nature" style="width:100%" onclick="myFunction(this);">
  </div>

  <div class="song-box">
    <img...

CSS

/* container to stack flex-container and black-bar */
.container{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}

.flex-container {
  max-width: 1700px;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  overflow-y: auto;
  /* calculating the available height remaining.  */
  height: calc(100vh - 80px); 
}

.black-bar {
  background-color: #242424;
  width: 100%;
  height: 80px;
}

/* removing browser default margin */
body{
  margin:0;
}