解决.showGuesses元素滚动条异常：溢出不显示/未溢出仍显示

我给.showGuesses元素设置了max-height: 100px，原本希望内容高度超过这个值时才显示垂直滚动条。一开始滚动条完全不出现，后来在@EssXTee的帮助下滚动条能显示了，但现在又出现新问题：就算内容没有溢出容器，滚动条也一直存在。请问该怎么解决？

HTML代码 #

<!DOCTYPE html>
<form class="order-form" method="POST" action="insert_data.php">
                <legend>Insert your address</legend>
                
                <div class="input-area-wrap">
                    <div class="input-area">
                        <label>street/avenue</label>
                        <input type="text" name="street" required>
                    </div>
                    <div class="showGuesses">
                        <div class="showGuess">Street 1</div>
                        <div class="showGuess">Street 2</div>
                        <div class="showGuess">Street 3</div>
                        <div class="showGuess">Street 4</div>
                    </div>
                </div>
</form>

CSS代码 #

* {
  -webkit-box-sizing: border-box!important;
            box-sizing: border-box!important;
}
.order-form {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
    width: 80%;
    max-width: 800px;
    margin: 0 auto;
    border: 1px solid #222;
    border-radius: 15px;
    padding: 20px;
    margin-top: 25px;
    position: unset!important;
    overflow: hidden;
}
legend {
    text-align: center;
    margin-bottom: 25px!important;
}
.input-area-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}
.input-area {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    position: relative;
}
.input-area label {
    width: 150px;
}
input[type="text"] {
    width: 250px!important;
    outline: none;
}
input[type="text"]:focus {
    border: 2px solid darkred!important;
    outline: none;
}
input[type="submit"] {
    width: 100px;
    margin: 25px auto 0;
    border-radius: 25px;
    background: rgb(255, 74, 74);
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 16px;
}
.showGuesses {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    z-index: 3;
    /* top: 25px; */
    margin-left: 150px;
    font-size: 14px;
    width: 100%;
    max-height: 100px;
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}
.showGuess {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border: 1px solid #222;
    padding: 5px;
    width: 250px;
    min-height: 45px;
    text-align: center;
    background: #fff;
    border-bottom: none;
}

解决方案 #

问题根源在于.showGuesses的overflow-y: scroll属性——这个属性会强制浏览器显示垂直滚动条，无论内容是否超出容器高度。要实现“仅溢出时显示滚动条”的效果，只需将overflow-y: scroll替换为overflow-y: auto即可。

另外，代码中的overflow: -moz-scrollbars-vertical是旧版Firefox的专属属性，现在已经无需保留，可以直接删除。

修改后的.showGuesses CSS代码如下：

.showGuesses {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    z-index: 3;
    margin-left: 150px;
    font-size: 14px;
    width: 100%;
    max-height: 100px;
    overflow-y: auto; /* 替换原有的scroll */
}

修改完成后，当内容高度超过100px时，垂直滚动条会自动出现；内容未溢出时，滚动条会隐藏，完全符合预期需求。

内容的提问来源于stack exchange，提问作者user19712456