title: How to make dynamic div overflow without fixed height
body: <p>I'm trying to create a scrolling element without a fixed height parent. I want <code>#SECTION1</code> of my code to be scrollable to show the rest of the images. I can't seem to find a way to do this. I've attempted to set <code>#SECTION1</code> to a fixed height but it forces my images to be squashed. Any help would be appreciated. Thank you. </p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
  }
  
   ::-webkit-scrollbar {
    width: 15px;
  }
  
  
  /* Track */
  
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  
  /* Handle */
  
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  
  /* Handle on hover */
  
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  
  html,
  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
  }
  
  
  /*----------SECTION 1----------*/
  
  header {
    height: 80px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  #header-wrapper {
    display: flex;
    width: 55%;
    justify-content: space-between;
    align-items: center;
  }
  
  #logo {
    width: 70px;
  }
  
  nav a {
    color: white;
    padding: 20px;
    font-family: 'Roboto';
    font-size: 0.8em;
    font-weight: bold;
  }
  
  @media only screen and (max-width: 750px) {
    nav {
      display: none;
    }
  }
  
  #mobile-menu {
    color: white;
    font-size: 1.3em;
  }
  
  @media only screen and (min-width: 750px) {
    #mobile-menu {
      display: none;
    }
  }
  
  #body-wrapper {
    display: flex;
    height: 100%;
  }
  
  aside {
    width: 300px;
    height: 889px;
    background-color: #0c0c0c;
    display: flex;
    align-items: center;
    padding-top: 50px;
    flex-direction: column;
  }
  
  #aside-wrap {
    width: 70%;
  }
  
  #user-info {
    display: flex;
    margin: 10px;
    margin-left: 0;
    margin-bottom: 50px;
    justify-content: center;
    align-items: center;
    font-family: 'Roboto';
    font-weight: 400;
  }
  
  #user {
    font-size: 40px;
    color: white;
    margin-right: 20px;
  }
  
  aside h3 {
    color: white;
    font-size: 1.2em;
  }
  
  #hello {
    color: white;
    font-size: 20px;
  }
  
  #box-1 {
    color: #808080;
    margin-bottom: 60px;
  }
  
  #box-1 p {
    margin: 20px;
    margin-left: 0;
    font-family: 'Roboto';
    font-size: 0.9em;
  }
  
  #box-2 {
    color: #808080;
  }
  
  #box-2 p {
    margin: 20px;
    margin-left: 0;
    font-family: 'Roboto';
    font-size: 0.9em;
  }
  
  #section1 {
    background-color: #191919;
    /*background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), 
  url("listen_background.jpg");*/
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    overflow: auto;
  }
  
  #section1-wrapper {
    width: 80%;
    display: flex;
    font-family: 'Roboto';
    padding-top: 50px;
    padding-bottom: 50px;
    align-items: center;
    flex-direction: column;
  }
  
  #section1 h1 {
    color: white;
    font-size: 3em;
    margin-bottom: 50px;
    text-align: center;
  }
  
  .image-box {
    max-width: 280px;
    margin: 20px;
  }
  
  img {
    max-width: 100%;
  }
  
  #image-row-1,
  #image-row-2,
  #image-row-3,
  #image-row-4 {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    justify-content: space-between;
  }
  
  @media only screen and (max-width: 1080px) {
    #image-row-1,
    #image-row-2,
    #image-row-3,
    #image-row-4 {
      flex-direction: column;
      align-items: center;
    }
  }
  
  
  /*----------------SECTION 2--------------*/
  
  #pusher {
    height: 889px;
    width: 300px;
  }
  
  #player {
    height: 80px;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
  }
  
  @media only screen and (max-width: 750px) {
    #player {
      height: auto;
    }
  }
  
  #player-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 80%;
  }
  
  @media only screen and (max-width: 750px) {
    #player-wrapper {
      flex-direction: column;
    }
  }
  
  .button-controls {
    color: white;
    margin: 20px;
  }
  
  #player-bar {
    width: 100%;
    height: 3px;
    background-color: white;
  }
  
  #player-filler {
    width: 50%;
    height: 100%;
    background-color: #2A4B5A;
  }
  
  #timeline {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  @media only screen and (max-width: 750px) {
    #timeline {
      width: 100%;
    }
  }
  
  #timeline p {
    color: white;
    margin: 20px;
  }
  
  #share,
  #phone {
    color: white;
    margin: 20px;
  }
  
  @media only screen and (max-width: 750px) {
    #share,
    #phone {
      display: none;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Flo Music&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="listen.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="test"&gt;
      &lt;div id="body-wrapper"&gt;
        &lt;aside&gt;
          &lt;div id="aside-wrap"&gt;
            &lt;div id="user-info"&gt;
              &lt;i class="far fa-user-circle" id="user"&gt;&lt;/i&gt;
              &lt;h3&gt;Emmanuel&lt;/h3&gt;
            &lt;/div&gt;
  
            &lt;div id="box-1"&gt;
              &lt;p&gt;Your Library&lt;/p&gt;
              &lt;p&gt;Recently Played&lt;/p&gt;
              &lt;p&gt;Songs&lt;/p&gt;
              &lt;p&gt;Playlist&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div id="box-2"&gt;
              &lt;p&gt;Your Library&lt;/p&gt;
              &lt;p&gt;Recently Played&lt;/p&gt;
              &lt;p&gt;Songs&lt;/p&gt;
              &lt;p&gt;Playlist&lt;/p&gt;
            &lt;/div&gt;
  
            &lt;p&gt;HOME&lt;/p&gt;
          &lt;/div&gt;
        &lt;/aside&gt;
  
        &lt;section id="section1"&gt;
          &lt;div id="section1-wrapper"&gt;
            &lt;h1&gt;New Releases&lt;/h1&gt;
            &lt;div id="image-row-1"&gt;
              &lt;div class="image-box"&gt;&lt;img src="album1.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album2.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album3.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album4.jpg"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;div id="image-row-2"&gt;
              &lt;div class="image-box"&gt;&lt;img src="album5.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album6.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album7.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album8.png"&gt;&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div id="image-row-3"&gt;
              &lt;div class="image-box"&gt;&lt;img src="album9.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album10.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album11.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album12.jpg"&gt;&lt;/div&gt;
            &lt;/div&gt;
  
            &lt;div id="image-row-4"&gt;
              &lt;div class="image-box"&gt;&lt;img src="album13.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album14.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album15.jpg"&gt;&lt;/div&gt;
              &lt;div class="image-box"&gt;&lt;img src="album16.jpg"&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;div id="player"&gt;
        &lt;div id="player-wrapper"&gt;
          &lt;div id="controls"&gt;
            &lt;i class="fas fa-backward button-controls"&gt;&lt;/i&gt;
            &lt;i class="fas fa-play button-controls"&gt;&lt;/i&gt;
            &lt;i class="fas fa-forward button-controls"&gt;&lt;/i&gt;
          &lt;/div&gt;
  
          &lt;div id="timeline"&gt;
            &lt;p&gt;0:00&lt;/p&gt;
            &lt;div id="player-bar"&gt;
              &lt;div id="player-filler"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;p&gt;0:00&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="icon-right"&gt;
            &lt;i class="fas fa-share-square" id="share"&gt;&lt;/i&gt;
            &lt;i class="fas fa-mobile" id="phone"&gt;&lt;/i&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>