Why doesn't vertical scroll bar appear in the element block when it's overflowed?

user_19712456 0
Viewed 32

I've got a .showGuesses block which max-height is set to 100px. When its height goes over its maximum I want a vertical scroll bar to appear. But, unfortunately, for some reason I never get the scroll bar.

How to make the scrollbar to appear?

Here's the code and the result: 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:

Due to help of @EssXTee I now get the scrollbar, but it doesn't disappear if the content of showGuesses block doesn't overflow it. It's just there all the time for some reason.

How to fix that?

css html
2 Answers

"replace the code block "<div class="showGuesses">" with "<div class="showGuesses" style="height: 100px; overflow-y: scroll;">" with this

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

user_197508020

Just posting this answer so there is an official solution.

The scrollbar does appear but it seems that it is too far right on the screen to be seen. This is because the .showGuesses class has a width of 100%, but also a left margin of 150 pixels. This makes the .showGuesses div the same size as the parent, but shifted to the right by 150 pixels. And this is where the scrollbar is.

So simply reducing the width of the .showGuesses class does fix this. As far as what to set the width to, I suppose that's a preference of where you would like the scrollbar to appear.

EDIT As far as the scrollbar always being visible, use overflow-y: auto; instead of setting it to scroll, which will always show a scrollbar. Using auto only shows the scrollbar if needed.

user_23396190
Related