html - 如何在没有固定高度的情况下使动态div溢出

Question

我正在尝试创建一个没有固定高度父元素的滚动元素。我希望我的代码的 #SECTION1 可以滚动以显示其余图像。我似乎找不到办法做到这一点。我试图将 #SECTION1 设置为固定高度，但它会强制压缩我的图像。任何帮助，将不胜感激。谢谢。

这是我的代码:

* {
  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>

Answer 1

flex 元素设置为 flex-shrink: 1默认情况下。这意味着它们可以收缩以防止容器溢出。在您的情况下，您可能需要禁用此功能 (flex-shrink: 0)。

---

此外，考虑在您的 flex 容器上使用 height: 100vh，而不是 height: 100%。百分比高度很棘手，通常需要 parent 有一个定义的高度。

有关详细信息，请参阅此帖子:Working with the CSS height property and percentage values

---

最后，从您的 flex 容器中删除 justify-content: center。在某些情况下，它会导致无法通过滚动访问内容。

有关详细信息，请参阅此帖子:Can't scroll to top of flex item that is overflowing container

---

对您的代码进行这些调整:

#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