How to make dynamic div overflow without fixed height

I'm trying to create a scrolling element without a fixed height parent. I want #SECTION1 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 #SECTION1 to a fixed height but it forces my images to be squashed. Any help would be appreciated. Thank you.

Here is my 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;

  }

}

<head>

  <meta charset="utf-8">

  <title>Flo Music</title>

  <link rel="stylesheet" type="text/css" href="listen.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>



<body>

  <div id="test">

    <div id="body-wrapper">

      <aside>

        <div id="aside-wrap">

          <div id="user-info">

            <i class="far fa-user-circle" id="user"></i>

            <h3>Emmanuel</h3>

          </div>



          <div id="box-1">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <div id="box-2">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <p>HOME</p>

        </div>

      </aside>



      <section id="section1">

        <div id="section1-wrapper">

          <h1>New Releases</h1>

          <div id="image-row-1">

            <div class="image-box"><img src="album1.jpg"></div>

            <div class="image-box"><img src="album2.jpg"></div>

            <div class="image-box"><img src="album3.jpg"></div>

            <div class="image-box"><img src="album4.jpg"></div>

          </div>

          <div id="image-row-2">

            <div class="image-box"><img src="album5.jpg"></div>

            <div class="image-box"><img src="album6.jpg"></div>

            <div class="image-box"><img src="album7.jpg"></div>

            <div class="image-box"><img src="album8.png"></div>

          </div>



          <div id="image-row-3">

            <div class="image-box"><img src="album9.jpg"></div>

            <div class="image-box"><img src="album10.jpg"></div>

            <div class="image-box"><img src="album11.jpg"></div>

            <div class="image-box"><img src="album12.jpg"></div>

          </div>



          <div id="image-row-4">

            <div class="image-box"><img src="album13.jpg"></div>

            <div class="image-box"><img src="album14.jpg"></div>

            <div class="image-box"><img src="album15.jpg"></div>

            <div class="image-box"><img src="album16.jpg"></div>

          </div>

        </div>

      </section>

    </div>



    <div id="player">

      <div id="player-wrapper">

        <div id="controls">

          <i class="fas fa-backward button-controls"></i>

          <i class="fas fa-play button-controls"></i>

          <i class="fas fa-forward button-controls"></i>

        </div>



        <div id="timeline">

          <p>0:00</p>

          <div id="player-bar">

            <div id="player-filler"></div>

          </div>

          <p>0:00</p>

        </div>



        <div id="icon-right">

          <i class="fas fa-share-square" id="share"></i>

          <i class="fas fa-mobile" id="phone"></i>

        </div>

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

asked Nov 25 '18 at 22:37

OJM

6619

add a comment |

Here is my 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;

  }

}

<head>

  <meta charset="utf-8">

  <title>Flo Music</title>

  <link rel="stylesheet" type="text/css" href="listen.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>



<body>

  <div id="test">

    <div id="body-wrapper">

      <aside>

        <div id="aside-wrap">

          <div id="user-info">

            <i class="far fa-user-circle" id="user"></i>

            <h3>Emmanuel</h3>

          </div>



          <div id="box-1">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <div id="box-2">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <p>HOME</p>

        </div>

      </aside>



      <section id="section1">

        <div id="section1-wrapper">

          <h1>New Releases</h1>

          <div id="image-row-1">

            <div class="image-box"><img src="album1.jpg"></div>

            <div class="image-box"><img src="album2.jpg"></div>

            <div class="image-box"><img src="album3.jpg"></div>

            <div class="image-box"><img src="album4.jpg"></div>

          </div>

          <div id="image-row-2">

            <div class="image-box"><img src="album5.jpg"></div>

            <div class="image-box"><img src="album6.jpg"></div>

            <div class="image-box"><img src="album7.jpg"></div>

            <div class="image-box"><img src="album8.png"></div>

          </div>



          <div id="image-row-3">

            <div class="image-box"><img src="album9.jpg"></div>

            <div class="image-box"><img src="album10.jpg"></div>

            <div class="image-box"><img src="album11.jpg"></div>

            <div class="image-box"><img src="album12.jpg"></div>

          </div>



          <div id="image-row-4">

            <div class="image-box"><img src="album13.jpg"></div>

            <div class="image-box"><img src="album14.jpg"></div>

            <div class="image-box"><img src="album15.jpg"></div>

            <div class="image-box"><img src="album16.jpg"></div>

          </div>

        </div>

      </section>

    </div>



    <div id="player">

      <div id="player-wrapper">

        <div id="controls">

          <i class="fas fa-backward button-controls"></i>

          <i class="fas fa-play button-controls"></i>

          <i class="fas fa-forward button-controls"></i>

        </div>



        <div id="timeline">

          <p>0:00</p>

          <div id="player-bar">

            <div id="player-filler"></div>

          </div>

          <p>0:00</p>

        </div>



        <div id="icon-right">

          <i class="fas fa-share-square" id="share"></i>

          <i class="fas fa-mobile" id="phone"></i>

        </div>

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

asked Nov 25 '18 at 22:37

OJM

6619

add a comment |

Here is my 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;

  }

}

<head>

  <meta charset="utf-8">

  <title>Flo Music</title>

  <link rel="stylesheet" type="text/css" href="listen.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>



<body>

  <div id="test">

    <div id="body-wrapper">

      <aside>

        <div id="aside-wrap">

          <div id="user-info">

            <i class="far fa-user-circle" id="user"></i>

            <h3>Emmanuel</h3>

          </div>



          <div id="box-1">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <div id="box-2">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <p>HOME</p>

        </div>

      </aside>



      <section id="section1">

        <div id="section1-wrapper">

          <h1>New Releases</h1>

          <div id="image-row-1">

            <div class="image-box"><img src="album1.jpg"></div>

            <div class="image-box"><img src="album2.jpg"></div>

            <div class="image-box"><img src="album3.jpg"></div>

            <div class="image-box"><img src="album4.jpg"></div>

          </div>

          <div id="image-row-2">

            <div class="image-box"><img src="album5.jpg"></div>

            <div class="image-box"><img src="album6.jpg"></div>

            <div class="image-box"><img src="album7.jpg"></div>

            <div class="image-box"><img src="album8.png"></div>

          </div>



          <div id="image-row-3">

            <div class="image-box"><img src="album9.jpg"></div>

            <div class="image-box"><img src="album10.jpg"></div>

            <div class="image-box"><img src="album11.jpg"></div>

            <div class="image-box"><img src="album12.jpg"></div>

          </div>



          <div id="image-row-4">

            <div class="image-box"><img src="album13.jpg"></div>

            <div class="image-box"><img src="album14.jpg"></div>

            <div class="image-box"><img src="album15.jpg"></div>

            <div class="image-box"><img src="album16.jpg"></div>

          </div>

        </div>

      </section>

    </div>



    <div id="player">

      <div id="player-wrapper">

        <div id="controls">

          <i class="fas fa-backward button-controls"></i>

          <i class="fas fa-play button-controls"></i>

          <i class="fas fa-forward button-controls"></i>

        </div>



        <div id="timeline">

          <p>0:00</p>

          <div id="player-bar">

            <div id="player-filler"></div>

          </div>

          <p>0:00</p>

        </div>



        <div id="icon-right">

          <i class="fas fa-share-square" id="share"></i>

          <i class="fas fa-mobile" id="phone"></i>

        </div>

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

asked Nov 25 '18 at 22:37

OJM

6619

Here is my 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;

  }

}

<head>

  <meta charset="utf-8">

  <title>Flo Music</title>

  <link rel="stylesheet" type="text/css" href="listen.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>



<body>

  <div id="test">

    <div id="body-wrapper">

      <aside>

        <div id="aside-wrap">

          <div id="user-info">

            <i class="far fa-user-circle" id="user"></i>

            <h3>Emmanuel</h3>

          </div>



          <div id="box-1">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <div id="box-2">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <p>HOME</p>

        </div>

      </aside>



      <section id="section1">

        <div id="section1-wrapper">

          <h1>New Releases</h1>

          <div id="image-row-1">

            <div class="image-box"><img src="album1.jpg"></div>

            <div class="image-box"><img src="album2.jpg"></div>

            <div class="image-box"><img src="album3.jpg"></div>

            <div class="image-box"><img src="album4.jpg"></div>

          </div>

          <div id="image-row-2">

            <div class="image-box"><img src="album5.jpg"></div>

            <div class="image-box"><img src="album6.jpg"></div>

            <div class="image-box"><img src="album7.jpg"></div>

            <div class="image-box"><img src="album8.png"></div>

          </div>



          <div id="image-row-3">

            <div class="image-box"><img src="album9.jpg"></div>

            <div class="image-box"><img src="album10.jpg"></div>

            <div class="image-box"><img src="album11.jpg"></div>

            <div class="image-box"><img src="album12.jpg"></div>

          </div>



          <div id="image-row-4">

            <div class="image-box"><img src="album13.jpg"></div>

            <div class="image-box"><img src="album14.jpg"></div>

            <div class="image-box"><img src="album15.jpg"></div>

            <div class="image-box"><img src="album16.jpg"></div>

          </div>

        </div>

      </section>

    </div>



    <div id="player">

      <div id="player-wrapper">

        <div id="controls">

          <i class="fas fa-backward button-controls"></i>

          <i class="fas fa-play button-controls"></i>

          <i class="fas fa-forward button-controls"></i>

        </div>



        <div id="timeline">

          <p>0:00</p>

          <div id="player-bar">

            <div id="player-filler"></div>

          </div>

          <p>0:00</p>

        </div>



        <div id="icon-right">

          <i class="fas fa-share-square" id="share"></i>

          <i class="fas fa-mobile" id="phone"></i>

        </div>

* {

  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;

  }

}

<head>

  <meta charset="utf-8">

  <title>Flo Music</title>

  <link rel="stylesheet" type="text/css" href="listen.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>



<body>

  <div id="test">

    <div id="body-wrapper">

      <aside>

        <div id="aside-wrap">

          <div id="user-info">

            <i class="far fa-user-circle" id="user"></i>

            <h3>Emmanuel</h3>

          </div>



          <div id="box-1">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <div id="box-2">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <p>HOME</p>

        </div>

      </aside>



      <section id="section1">

        <div id="section1-wrapper">

          <h1>New Releases</h1>

          <div id="image-row-1">

            <div class="image-box"><img src="album1.jpg"></div>

            <div class="image-box"><img src="album2.jpg"></div>

            <div class="image-box"><img src="album3.jpg"></div>

            <div class="image-box"><img src="album4.jpg"></div>

          </div>

          <div id="image-row-2">

            <div class="image-box"><img src="album5.jpg"></div>

            <div class="image-box"><img src="album6.jpg"></div>

            <div class="image-box"><img src="album7.jpg"></div>

            <div class="image-box"><img src="album8.png"></div>

          </div>



          <div id="image-row-3">

            <div class="image-box"><img src="album9.jpg"></div>

            <div class="image-box"><img src="album10.jpg"></div>

            <div class="image-box"><img src="album11.jpg"></div>

            <div class="image-box"><img src="album12.jpg"></div>

          </div>



          <div id="image-row-4">

            <div class="image-box"><img src="album13.jpg"></div>

            <div class="image-box"><img src="album14.jpg"></div>

            <div class="image-box"><img src="album15.jpg"></div>

            <div class="image-box"><img src="album16.jpg"></div>

          </div>

        </div>

      </section>

    </div>



    <div id="player">

      <div id="player-wrapper">

        <div id="controls">

          <i class="fas fa-backward button-controls"></i>

          <i class="fas fa-play button-controls"></i>

          <i class="fas fa-forward button-controls"></i>

        </div>



        <div id="timeline">

          <p>0:00</p>

          <div id="player-bar">

            <div id="player-filler"></div>

          </div>

          <p>0:00</p>

        </div>



        <div id="icon-right">

          <i class="fas fa-share-square" id="share"></i>

          <i class="fas fa-mobile" id="phone"></i>

        </div>

* {

  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;

  }

}

<head>

  <meta charset="utf-8">

  <title>Flo Music</title>

  <link rel="stylesheet" type="text/css" href="listen.css">

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

</head>



<body>

  <div id="test">

    <div id="body-wrapper">

      <aside>

        <div id="aside-wrap">

          <div id="user-info">

            <i class="far fa-user-circle" id="user"></i>

            <h3>Emmanuel</h3>

          </div>



          <div id="box-1">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <div id="box-2">

            <p>Your Library</p>

            <p>Recently Played</p>

            <p>Songs</p>

            <p>Playlist</p>

          </div>



          <p>HOME</p>

        </div>

      </aside>



      <section id="section1">

        <div id="section1-wrapper">

          <h1>New Releases</h1>

          <div id="image-row-1">

            <div class="image-box"><img src="album1.jpg"></div>

            <div class="image-box"><img src="album2.jpg"></div>

            <div class="image-box"><img src="album3.jpg"></div>

            <div class="image-box"><img src="album4.jpg"></div>

          </div>

          <div id="image-row-2">

            <div class="image-box"><img src="album5.jpg"></div>

            <div class="image-box"><img src="album6.jpg"></div>

            <div class="image-box"><img src="album7.jpg"></div>

            <div class="image-box"><img src="album8.png"></div>

          </div>



          <div id="image-row-3">

            <div class="image-box"><img src="album9.jpg"></div>

            <div class="image-box"><img src="album10.jpg"></div>

            <div class="image-box"><img src="album11.jpg"></div>

            <div class="image-box"><img src="album12.jpg"></div>

          </div>



          <div id="image-row-4">

            <div class="image-box"><img src="album13.jpg"></div>

            <div class="image-box"><img src="album14.jpg"></div>

            <div class="image-box"><img src="album15.jpg"></div>

            <div class="image-box"><img src="album16.jpg"></div>

          </div>

        </div>

      </section>

    </div>



    <div id="player">

      <div id="player-wrapper">

        <div id="controls">

          <i class="fas fa-backward button-controls"></i>

          <i class="fas fa-play button-controls"></i>

          <i class="fas fa-forward button-controls"></i>

        </div>



        <div id="timeline">

          <p>0:00</p>

          <div id="player-bar">

            <div id="player-filler"></div>

          </div>

          <p>0:00</p>

        </div>



        <div id="icon-right">

          <i class="fas fa-share-square" id="share"></i>

          <i class="fas fa-mobile" id="phone"></i>

        </div>

html css flexbox overflow

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

asked Nov 25 '18 at 22:37

OJM

6619

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

asked Nov 25 '18 at 22:37

OJM

6619

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

edited Nov 25 '18 at 22:52

a stone arachnid

1,0471723

asked Nov 25 '18 at 22:37

OJM

6619

asked Nov 25 '18 at 22:37

OJM

6619

asked Nov 25 '18 at 22:37

OJM

6619

add a comment |

2 Answers
2

active

oldest

votes

Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).

Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.

See this post for details: Working with the CSS height property and percentage values

Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.

See this post for details: Can't scroll to top of flex item that is overflowing container

Make these adjustments to your code:

#body-wrapper {

  display: flex;

  /* height: 100%; */

  height: calc(100vh - 80px); /* subtract footer height */

}



#section1 {

  background-color: #191919;

  display: flex;

  align-items: center;

  /* justify-content: center; */ /* remove to avoid scrolling problems */

  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;

  flex-shrink: 0; /* add to disable flex default shrinking feature */

}

jsFiddle demo

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

add a comment |

You should change your overflow property in the #section1

#section1-wrapper {

overflow: scroll;

}

edited Nov 25 '18 at 23:01

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

This still doesn't work. A scrollbar does appear, but I'm not able to actually use it to scroll.

– OJM
Nov 25 '18 at 22:59

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53472719%2fhow-to-make-dynamic-div-overflow-without-fixed-height%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).

Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.

See this post for details: Working with the CSS height property and percentage values

Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.

See this post for details: Can't scroll to top of flex item that is overflowing container

Make these adjustments to your code:

#body-wrapper {

  display: flex;

  /* height: 100%; */

  height: calc(100vh - 80px); /* subtract footer height */

}



#section1 {

  background-color: #191919;

  display: flex;

  align-items: center;

  /* justify-content: center; */ /* remove to avoid scrolling problems */

  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;

  flex-shrink: 0; /* add to disable flex default shrinking feature */

}

jsFiddle demo

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

add a comment |

Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).

Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.

See this post for details: Working with the CSS height property and percentage values

Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.

See this post for details: Can't scroll to top of flex item that is overflowing container

Make these adjustments to your code:

#body-wrapper {

  display: flex;

  /* height: 100%; */

  height: calc(100vh - 80px); /* subtract footer height */

}



#section1 {

  background-color: #191919;

  display: flex;

  align-items: center;

  /* justify-content: center; */ /* remove to avoid scrolling problems */

  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;

  flex-shrink: 0; /* add to disable flex default shrinking feature */

}

jsFiddle demo

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

add a comment |

Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).

Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.

See this post for details: Working with the CSS height property and percentage values

Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.

See this post for details: Can't scroll to top of flex item that is overflowing container

Make these adjustments to your code:

#body-wrapper {

  display: flex;

  /* height: 100%; */

  height: calc(100vh - 80px); /* subtract footer height */

}



#section1 {

  background-color: #191919;

  display: flex;

  align-items: center;

  /* justify-content: center; */ /* remove to avoid scrolling problems */

  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;

  flex-shrink: 0; /* add to disable flex default shrinking feature */

}

jsFiddle demo

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).

Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.

See this post for details: Working with the CSS height property and percentage values

Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.

See this post for details: Can't scroll to top of flex item that is overflowing container

Make these adjustments to your code:

#body-wrapper {

  display: flex;

  /* height: 100%; */

  height: calc(100vh - 80px); /* subtract footer height */

}



#section1 {

  background-color: #191919;

  display: flex;

  align-items: center;

  /* justify-content: center; */ /* remove to avoid scrolling problems */

  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;

  flex-shrink: 0; /* add to disable flex default shrinking feature */

}

jsFiddle demo

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

answered Nov 25 '18 at 23:22

Michael_B

154k48250360

add a comment |

You should change your overflow property in the #section1

#section1-wrapper {

overflow: scroll;

}

edited Nov 25 '18 at 23:01

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

This still doesn't work. A scrollbar does appear, but I'm not able to actually use it to scroll.

– OJM
Nov 25 '18 at 22:59

add a comment |

You should change your overflow property in the #section1

#section1-wrapper {

overflow: scroll;

}

edited Nov 25 '18 at 23:01

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

This still doesn't work. A scrollbar does appear, but I'm not able to actually use it to scroll.

– OJM
Nov 25 '18 at 22:59

add a comment |

You should change your overflow property in the #section1

#section1-wrapper {

overflow: scroll;

}

edited Nov 25 '18 at 23:01

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

You should change your overflow property in the #section1

#section1-wrapper {

overflow: scroll;

}

edited Nov 25 '18 at 23:01

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

edited Nov 25 '18 at 23:01

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

answered Nov 25 '18 at 22:57

Fernando Hernandez

896

This still doesn't work. A scrollbar does appear, but I'm not able to actually use it to scroll.

– OJM
Nov 25 '18 at 22:59

add a comment |

This still doesn't work. A scrollbar does appear, but I'm not able to actually use it to scroll.

– OJM
Nov 25 '18 at 22:59

This still doesn't work. A scrollbar does appear, but I'm not able to actually use it to scroll.

– OJM
Nov 25 '18 at 22:59

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk