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

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  method="POST" action="insert_data.php">
                <legend>Insert your address</legend>
                
                <div >
                    <div >
                        <label>street/avenue</label>
                        <input type="text" name="street" required>
                    </div>
                    <div >
                        <div >Street 1</div>
                        <div >Street 2</div>
                        <div >Street 3</div>
                        <div >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?

CodePudding user response：

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.

CodePudding user response：

"replace the code block "<div >" with "<div 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  method="POST" action="insert_data.php">
                <legend>Введите адрес</legend>
                
                <div >
                    <div >
                        <label>Улица/Проспект</label>
                        <input type="text" name="street" required>
                    </div>
                    <div  style="height: 100px; overflow-y: scroll;">
                        <div >Street 1</div>
                        <div >Street 2</div>
                        <div >Street 3</div>
                        <div >Street 4</div>
                    </div>
                </div>
</form>