Why is the ul element taking up the full width of the wrapper element when the container div is its parent? How can this be adjusted?
Here is the HTML structure:
Wrapper
| container
| label
| input
| ul
| botton
Here is the HTML & CSS code:
.wrapper{
margin: 20px auto;
}
.container {
position: relative;
display: flex;
flex-direction: column;
height: 200px;
width: 80%;
margin: auto;
}
.country-input {
height: 30px;
margin-bottom: 50px;
}
ul {
height: 200px;
width: 100%;
overflow: hidden;
overflow-y: scroll;
position: absolute;
background-color: #F2F2F2;
top: 20px;
left: 0px;
}
<div class="wrapper">
<div class="container">
<label for="country">State</label>
<input class="input country-input" id="country" type="text" />
<ul id='country-list'>
<li id="US">United States</li>
<li id="AF">Afghanistan</li>
<li id="AX">Åland Islands</li>
<li id="AL">Albania</li>
</ul>
<button>explore</button>
</div>
</div>Click here for the complete code
Preview of how it appears:
here
Observing the off-center position of the element on the left:
here