我有一个.showGuess块，它的最大高度设置为100px.当它的高度超过其最大值时，我希望出现一个垂直滚动条.但是，不幸的是，由于某种原因，我从来没有得到滚动条.
How to make the scrollbar to appear?个
以下是代码和结果:https://liveweave.com/hyo1ut
超文本标记语言
<!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;
}
UPD 0:个
由于@EssXTee的帮助，我现在得到了滚动条，但如果showGuess块的内容不溢出它，它不会消失.出于某种原因，它一直都在那里.
How to fix that?个