javascript - Flexbox 和溢出

Question

function plus(){
    number = document.getElementsByClassName("num")[0].innerHTML;
    number = parseInt(number) + 1;
    number = Number(number)
    const d = new Date();
    day = d.getDate()
    month = d.getMonth() + 1
    year = d.getFullYear() 
    today = day.toString(10)+'-'+month.toString(10)+'-'+year.toString(10)
    date = localStorage.getItem("date")
    set = localStorage.getItem('set')
    if( (set == '0' && date!=today) || set=="0" && date == today)
    {
        if(number >= 1)
        {
            document.getElementsByClassName("minus")[0].classList.remove("shake-crazy")
        }
        if(number >= 100 && number<=999){
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
            localStorage.setItem('set',1)
            localStorage.setItem('date',today)
        }
        else if (number>=1000 && number<=9999){
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
            localStorage.setItem('set',1)
            localStorage.setItem('date',today)
        }
        else if(number >= 10000 && number <= 99999){
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
            localStorage.setItem('set',1)
            localStorage.setItem('date',today)
        }
        else{
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
            localStorage.setItem('set',1)
            localStorage.setItem('date',today)
        }
    }
    else if(set=='1' && date == today)
    {
        document.getElementsByClassName("plus")[0].classList.add("shake-crazy")
    }
}

function minus(){
    number = document.getElementsByClassName("num")[0].innerHTML
    number = parseInt(number) - 1;
    number = Number(number)
    const d = new Date();
    day = d.getDate()
    month = d.getMonth() + 1
    year = d.getFullYear() 
    today = day.toString(10)+'-'+month.toString(10)+'-'+year.toString(10)
    date = localStorage.getItem("date")
    set = localStorage.getItem('set')
    if(set =='0' && date!=today)
    {
        if(number < 0){
            document.getElementsByClassName("num")[0].innerHTML = 0
            localStorage.setItem('streak',number);
            document.getElementsByClassName("minus")[0].classList.add("shake-crazy")
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
        }
        else if(number >= 100 && number<=999){
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
        }
        else if(number >= 1000 && number<=9999){
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
        }
        else{
            document.getElementsByClassName("num")[0].innerHTML = number
            localStorage.setItem('streak',number);
            document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
        }
    }
    else if(set=='1' && date==today)
    {
        document.getElementsByClassName("minus")[0].classList.add("shake-crazy")
    }    
}

function color_picker(className){
    console.log(className)
    if(className=='color_pallete_one')
    {
        document.getElementsByClassName("streak-container")[0].style=
        "background-image: linear-gradient(to right,#e92efb,#ff2079,#440bd4,#04005e);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("banner")[0].style=
        "background-image: linear-gradient(to right,#e92efb,#ff2079,#440bd4,#04005e);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("num")[0].style=
        "background-image: linear-gradient(to right,#e92efb,#ff2079,#440bd4,#04005e);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        localStorage.setItem('color','one')
    }
    else if(className=='color_pallete_two'){
        console.log('two working')
        document.getElementsByClassName("streak-container")[0].style=
        "background-image: linear-gradient(to right,#ddd429,#63c007,#fb33db,#0310ea);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("banner")[0].style=
        "background-image: linear-gradient(to right,#ddd429,#63c007,#fb33db,#0310ea);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("num")[0].style=
        "background-image: linear-gradient(to right,#ddd429,#63c007,#fb33db,#0310ea);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        localStorage.setItem('color','two')
    }
    else if(className=='color_pallete_three'){
        document.getElementsByClassName("streak-container")[0].style=
        "background-image: linear-gradient(to right,#b9b605,#0496f7,#ff822e,#f21a1d);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("banner")[0].style=
        "background-image: linear-gradient(to right,#b9b605,#0496f7,#ff822e,#f21a1d);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("num")[0].style=
        "background-image: linear-gradient(to right,#b9b605,#0496f7,#ff822e,#f21a1d);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        localStorage.setItem('color','three')
    }
    else if (className=='color_pallete_four'){
        document.getElementsByClassName("streak-container")[0].style=
        "background-image: linear-gradient(to right,#e300fc,#ce0f65,#ff5f01,#ce0000);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("banner")[0].style=
        "background-image: linear-gradient(to right,#e300fc,#ce0f65,#ff5f01,#ce0000);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("num")[0].style=
        "background-image: linear-gradient(to right,#e300fc,#ce0f65,#ff5f01,#ce0000);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        localStorage.setItem('color','four')
    }
    else if (className=='color_pallete_five'){
        document.getElementsByClassName("streak-container")[0].style=
        "background-image: linear-gradient(to right,#bdbdfd,#bc7579,#535eeb,#00218a);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("banner")[0].style=
        "background-image: linear-gradient(to right,#bdbdfd,#bc7579,#535eeb,#00218a);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        document.getElementsByClassName("num")[0].style=
        "background-image: linear-gradient(to right,#bdbdfd,#bc7579,#535eeb,#00218a);background-size: 300%;background-image: -100%;animation : backgroundShift 5s infinite alternate-reverse";
        localStorage.setItem('color','five')
    }
}

function pencil(){
    document.getElementsByClassName("overlay")[0].style = "display:flex"
    document.getElementsByClassName("input-text")[0].focus();
}

function emoji(){
    console.log('Emoji Icon Pressed')
}

function change(){
    card_content = document.getElementsByClassName("card-name")[0].innerHTML
    input_content = document.getElementsByClassName("input-text")[0].value
    console.log(input_content)
    document.getElementsByClassName("card-name")[0].innerHTML = input_content
    localStorage.setItem('name',input_content)
    document.getElementsByClassName("overlay")[0].style = "display:none"
}

function inputKey(){
    const log = document.getElementById('#message');
    document.addEventListener('keypress', logKey);
    function logKey(e)
    {
        if(e.key=="Enter")
        {
            card_content = document.getElementsByClassName("card-name")[0].innerHTML
            input_content = document.getElementsByClassName("input-text")[0].value
            console.log(input_content)
            document.getElementsByClassName("card-name")[0].innerHTML = input_content
            localStorage.setItem('name',input_content)
            document.getElementsByClassName("overlay")[0].style = "display:none"
        }

    }
}

function add_card(){
    streak = document.createElement("div");
    streak.classList.add("streak-box")
    console.log("div created")
    document.getElementsByClassName("streak-container")[0].appendChild(streak)
}

*{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    font-family: 'open sans',sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.overlay{
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2;
    justify-content: center;
    align-items: center;
}

.streak-name-edit{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    height: 10%;
    background-color: #f6f6f6;
    border-radius: 50px;
}

.streak-name-edit input{
    width: 65%;
    height: 60%;
    font-size: 150%;
    border:none;
    border-bottom: 3px solid black;
    outline: none;
    background-color: #f6f6f6;
    color: #857a7a;
    margin-left: 2%;
}

.streak-name-edit input[type="text"], textarea{
    background-color: #f6f6f6;
}

.emoji{
    height: 60%;
    width: 8%;
    margin-left: 2%;
    margin-right: 4%;
    cursor: pointer;
}

.emoji:active{
    transform: translateY(4px);
}

.add-button{
    background-color: black;
    color: white;
    font-size: 100%;
    height:60%;
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    cursor: pointer;
}

.add-button:active{
    transform: translateY(4px);
}

.paper-plane{
    width: 30px;
    height: 30px;
}

.banner{
    width: 100%;
    height: 9%;
    background-image: linear-gradient(
    to right,#e92efb,#ff2079,#440bd4,#04005e);
    background-size: 300%;
    background-image: -100%;
    animation : backgroundShift 5s infinite alternate-reverse
}

.banner img{
    width: 15%;
    height: 60%;
    margin-left: 3%;
    margin-top: 1.0%;
}

.streak-container{
    width: 100%;
    height: 80%;
    overflow-y: auto;
    background-color: yellow;
    position: relative;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    background-size: 300%;
    background-image: -100%;
    background-image: linear-gradient(
    to right,#e92efb,#ff2079,#440bd4,#04005e);
    animation : backgroundShift 5s infinite alternate-reverse
}

@keyframes backgroundShift{
    from {
        background-position: 0%;
    }
    to {
        background-position: 100%;
    }
}

.streak-box{
    width: 300px;
    height: 300px;
    border-radius: 5px;
    background-color: navajowhite;
    margin-bottom: 1%;
}

.streak-number{
    width: 100%;
    height: 50%;
    background-color: #f6f6f6;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: center;
    align-content: center;
    border:none;
}

.streak-name{
    width: 100%;
    height: 20%;
    background-color: #1e1e1e;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
}

.streak-number p{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 650%;
    background-image: linear-gradient(
    to right,#e92efb,#ff2079,#440bd4,#04005e);
    color: transparent;
    background-size: 300%;
    background-image: -100%;
    animation : backgroundShift 5s infinite alternate-reverse;
    background-clip: text;
    -webkit-background-clip: text;
    border:none;
}

.add-minus-container{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f6f6f6;
    border:none;
}

.plus{
    display: inline-block;
    width: 70px;
    height: 70px;  
    cursor: pointer;
    margin-right: 5%;
    margin-left: 5%;
}

.plus:active{
    transform:translateY(4px)
}

.minus{
    display: inline-block;
    width: 70px;
    height: 70px;
    cursor: pointer;
    margin-right: 5%;
    margin-left: 5%;
}

.minus:active{
    transform: translateY(4px);
}

.streak-name h1{
    display: flex;
    justify-content:center;
    align-items: center;
    color: white;
    font-size: 150%;
    width: 100%;
}

.icon-box{
    display: flex;
    background-color: #f6f6f6;
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pencil_box{
    background-color: #f6f6f6;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border:none;
}

.pencil{
    display: inline-block;
    justify-content: flex-end;
    width: 25px;
    height: 25px;
    color: black;
    margin-right: 5%;
}

.pencil:hover{
    cursor: pointer;
}

.pencil:active{
    transform:translateY(2px)
}

.lock_box{
    background-color: #f6f6f6;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border:none;
}

.lock{
    display: inline-block;
    justify-content: flex-start;
    width: 25px;
    height: 25px;
    color: black;
    margin-left: 5%;
}

.lock:hover{
    cursor: pointer;
}

.lock:active{
    transform:translateY(2px)
}

.add-container{
    color: white;
    width: 100%;
    height: 11%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: fixed;
    background-image: linear-gradient(
    to right,#e92efb,#ff2079,#440bd4,#04005e);
    background-size: 300%;
    background-image: -100%;
    animation : backgroundShift 5s infinite alternate-reverse;
}

.add-icon:active{
    transform: translateY(4px);
}

.add-icon{
    width: 3%;
    height: 60%;
}

.color_container{
    float: right;
    margin-right: 3%;
    width: 25%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.3);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.color_pallete_one{
    display: inline-block;
    width: 9%;
    height: 50%;
    background-image: linear-gradient(
    135deg,#e92efb,#04005e);
    border-radius: 100%;
    margin-left: 3%;
    margin-right: 3%;
    cursor: pointer;
}

.color_pallete_one:active{
    transform: translateY(4px);
}

.color_pallete_two{
    display: inline-block;
    width: 9%;
    height: 50%;
    background-image: linear-gradient(
    135deg,#ddd429,#0310ea);
    border-radius: 100%;
    margin-left: 3%;
    margin-right: 3%;
    cursor: pointer;
}

.color_pallete_two:active{
    transform: translateY(4px)
}

.color_pallete_three{
    display: inline-block;
    width: 9%;
    height: 50%;
    background-image: linear-gradient(
    135deg,#b9b605,#f21a1d);
    border-radius: 100%;
    margin-left: 3%;
    margin-right: 3%;
    cursor: pointer;
}

.color_pallete_three:active{
    transform: translateY(4px)
}

.color_pallete_four{
    display: inline-block;
    width: 9%;
    height: 50%;
    background-image: linear-gradient(
    135deg,#e300fc,#ce0000);
    border-radius: 100%;
    margin-left: 3%;
    margin-right: 3%;
    cursor: pointer;
}

.color_pallete_four:active{
    transform: translateY(4px)
}

.color_pallete_five{
    display: inline-block;
    width: 9%;
    height: 50%;
    background-image: linear-gradient(
    135deg,#bdbdfd,#00218a);
    border-radius: 100%;
    margin-left: 3%;
    margin-right: 3%;
    cursor: pointer;
}

.color_pallete_five:active{
    transform: translateY(4px)
}

<!DOCTYPE html>
<html>
<head>
    <title>Streak-o-Meter</title> 
    <meta http-equiv='cache-control' content='no-cache'>
    <meta http-equiv='expires' content='0'>
    <meta http-equiv='pragma' content='no-cache'>
    <link rel="stylesheet" href="index.css">
    <link rel="shortcut icon" type="image/png" href="S.ico"/>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" integrity="sha512-RliK2gk03WxUELn57ddjWLhEfhUiOZ85VvWLImFy8A7FOPMkF4Z9YGQ3VKX5jpwkEerAL6I0nC+JNeCPrxWBTw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="index.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
    <div class="overlay">
        <div class="streak-name-edit">
            <input class="input-text" id="message" onKeyPress="inputKey()" type="text">
            <ion-icon class = "emoji"  onclick="emoji()" name="happy"></ion-icon>
            <div class="add-button" onclick="change()"><ion-icon class="paper-plane" name="paper-plane-outline"></ion-icon></div>
        </div>
    </div>
    <div class ="banner">
        <img src="https://fontmeme.com/permalink/210712/f57fcf4c51d79cadc27c77c9629fa9ad.png" alt="streak-meter-banner-logo">
        <div class = "color_container">
            <div class="color_pallete_one" onclick="color_picker(this.getAttribute('class'));"></div>
            <div class="color_pallete_two" onclick="color_picker(this.getAttribute('class'))"></div>
            <div class="color_pallete_three" onclick="color_picker(this.getAttribute('class'))"></div>
            <div class="color_pallete_four" onclick="color_picker(this.getAttribute('class'))"></div>
            <div class="color_pallete_five" onclick="color_picker(this.getAttribute('class'))"></div>
        </div>
    </div>
    <div class="streak-container">
        
    </div>
    <div class="add-container" onclick="add_card()"><ion-icon class="add-icon" name="add-outline"></ion-icon></div>
    <script>
        window.onload = function(){
            number = document.getElementsByClassName("num")[0].innerHTML;
            number = Number(number)
            console.log(number)
            var num_holder = localStorage.getItem('streak');
            console.log(number,num_holder)
            if(Number.isNaN(num_holder) || Number(num_holder) < 0 || num_holder == null || num_holder == "NaN" || num_holder == "null"){
                num_holder = Number(0)
                localStorage.setItem('streak', 0);
                console.log('Caught the NaN and set to 0')
                console.log('Working')
            }
            console.log(num_holder)
            localStorage.setItem('streak', num_holder);
            document.getElementsByClassName("num")[0].innerHTML = num_holder

            card_content = document.getElementsByClassName("card-name")[0].innerHTML
            console.log(card_content)
            name = localStorage.getItem('name')
            if(name == "undefined" || name == "null" || name == null)
            {
                localStorage.setItem('name',card_content)
            }
            document.getElementsByClassName("card-name")[0].innerHTML = localStorage.getItem('name')

            color = localStorage.getItem('color')
            console.log("Color Loaded = "+color)
            if(color != null && color != "null" && color != null && color != '')
            {
                if(color == "one")
                {
                    console.log("One was called")
                    color_picker("color_pallete_one")
                }
                if(color == "two")
                {
                    console.log("two was called")
                    color_picker("color_pallete_two")
                }
                if(color == "three")
                {
                    console.log("three was called")
                    color_picker("color_pallete_three")
                }
                if(color == "four")
                {
                    console.log("four was called")
                    color_picker("color_pallete_four")
                }
                if(color == "five")
                {
                    console.log("five was called")
                    color_picker("color_pallete_five")
                }
            }
            set = localStorage.getItem('set')
            if(set == "null" || set == "undefined" || set == null || set=='')
            {
                localStorage.setItem('set',0)
            }
            today = ''
            const d = new Date();
            day = d.getDate()
            month = d.getMonth() + 1
            year = d.getFullYear() 
            today = day.toString(10)+'-'+month.toString(10)+'-'+year.toString(10)
            date = localStorage.getItem("date")
            console.log(date)
            if(date === "null" || date === "undefined" || date === null || date === '')
            {
                console.log("set the date because it's the first time")
                localStorage.setItem('date',today)
            }
            console.log("today :"+today+" Date :"+date)
            if( set == '1' && date!=today)
            {
                localStorage.setItem('set','0')
                document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-open');
                document.getElementsByClassName("minus")[0].classList.remove("shake-crazy")
                document.getElementsByClassName("plus")[0].classList.remove("shake-crazy")
            }
            else if( set == '1' && date==today)
            {
                document.getElementsByClassName("lock")[0].setAttribute('name', 'lock-closed');
            }
        }
    </script>
</body>
</html>

我目前正在从事一个我自己想法的项目，我目前正被困在这一部分。当我点击下面的添加按钮时，我基本上想添加卡片，但这里的问题是，当我点击它时，即使我添加了overflowY：auto，创建的卡片也不会溢出div容器，这来自我的轻描淡写的是，当卡片数量超过 div 时，应该会自动上下滚动。相反，在我的情况下，我的卡片会重新调整大小以适应容器的大小。

我还附上了一个 JSFidle 链接以防万一，Streak-o-Meter

P.S：这不是整个项目，而是对我所面临的错误的有效解释。但是，提前感谢您花时间查看进入我的问题。

标签： javascripthtmlcssflexboxoverflow