为什么垂直滚动条溢出时不会出现在元素块中？

我有一个 .showGuesses 块，最大高度设置为 100px。当它的高度超过其最大值时，我希望出现一个垂直滚动条。但是，不幸的是，由于某种原因，我从未得到滚动条。

如何使滚动条出现？

以下是代码和结果：https://liveweave.com/hyo1ut

.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;
}

UPD 0：

由于@EssXTee的帮助，我现在得到了滚动条，但如果 showGuesses 块的内容没有溢出它，它就不会消失。出于某种原因，它一直在那里。

如何解决？

只是发布这个答案，以便有一个官方解决方案。

滚动条确实出现，但似乎在屏幕上太右而无法看到。这是因为.showGuesses类的宽度为 100%，但左边距也为 150 像素。这使得.showGuessesdiv 的大小与父级相同，但向右移动了 150 像素。这就是滚动条所在的地方。

因此，简单地减小.showGuesses类的宽度确实可以解决此问题。至于将宽度设置为什么，我想这是您希望滚动条出现的位置的偏好。

编辑只要滚动条始终可见，请使用overflow-y: auto;而不是将其设置为scroll，这将始终显示滚动条。仅在需要时使用auto显示滚动条。

"将代码块"<div class="showGuesses">" 替换为 "<div class="showGuesses" style="height: 100px; overflow-y: scroll;">

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

<form class="order-form" method="POST" action="insert_data.php">
<legend>Введите адрес</legend>

<div class="input-area-wrap">
<div class="input-area">
<label>Улица/Проспект</label>
<input type="text" name="street" required>
</div>
<div class="showGuesses" style="height: 100px; overflow-y: scroll;">
<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>

相关内容

最新更新

热门标签：