Почему мой Flexbox оставляет огромный зазор внизу?

Question

Поэтому, когда я сжимаю страницу, чтобы уместить ее на мобильном устройстве, она оставляет огромный пробел внизу.

Я хочу, чтобы она просто укладывалась в обычном режиме, когда она сжимается, поэтому она располагается один над другим.не оставляя огромного зазора внизу.

Внизу нет зазора, когда он рассчитан на настольный компьютер, но как только я уменьшу его, они складываются, но это также оставляет огромный зазор внизу.

Это то, что он делает https://imgur.com/NLUx9ji

.song-box {
    width: 300px;
    margin: 20px;
    position: relative;
    vertical-align: top;

}

.flex-container {
    width: 1700px;
    display: flex;
    flex-wrap: wrap;
}


.flex-container img {
    opacity: 0.5;
}

.flex-container img:hover {
    opacity: 1;
}

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

тело

body {
    margin: 0;
    padding: 0;
    background: url(/images/party.jpg);
    /* background-size: 100%; */
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}

Answer 1

Избавьтесь от

background-attachment: fixed;

и оставьте высоту автоматической на фоновом изображении.фоновое изображение должно определяться его содержимым из того, что я вижу.

Кроме того, установка определенной ширины приведет к тому, что поле будет расширяться вправо.Из-за этого flex-wrap никогда не сработает, потому что область просмотра, хотя она и меньше, по-прежнему составляет 1700 пикселей.Я предлагаю использовать

.flex-container {
    max-width: 1700px;
    display: flex;
    flex-wrap: wrap;
}

. Это должно быть правильно завернуто, оставляя место внизу.

Answer 2

Кажется, что фоновое изображение, которое вы используете, вызывает зазор в нижней части контейнера.