Div with Overflow : - html

Question

I want to have 2 elements in a div but only one should be visible, and I want to have a vertical scrollbar.
Unfortunately, the second element is visible and there is no scrollbar.
#visu {
top:10px;
height:180px;
width:50%;
overflow:auto;
background-color:yellow;
}
#element1 {
position:absolute;
top:15px;
left:80px;
}
#element2 {
position:absolute;
top:200px;
left:80px;
}
.element {
margin-right:-50px;
}
.namecontainer {
display:flex;
border:4px solid #000033; border-radius:10px;
padding:10px; box-sizing:border-box;
background-color:white;
width:280px;
height:150px;
margin-left:0px;
align-items: center;
justify-content:center:
color:#1a1a1a;
}
.namecontainer p {
font-size:35px;
font-family: 'Arial';
font-weight:bold;
color:#1a1a1a;
text-align:center;
width:380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class= "name" id="name1" >element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class= "name" id="name3" >element 2</p>
</div>
</div>
</div>

Answer 1

You need to play with margin and drop absolute positionnong cause it takes element off the flow and is not necessary here https://jsfiddle.net/vpdc5L4m/13/
#visu {
top: 10px;
height: 180px;
width: 50%;
overflow: auto;
background-color: yellow;
}
#element1 {}
#element2 {}
.element {
margin: 15px auto ;
}
.namecontainer {
display: flex;
border: 4px solid #000033;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
background-color: white;
width: 280px;
height: 150px;
margin:auto;
align-items: center;
justify-content: center: color: #1a1a1a;
}
.namecontainer p {
font-size: 35px;
font-family: 'Arial';
font-weight: bold;
color: #1a1a1a;
text-align: center;
width: 380px;
}
<div id="visu">
<div id="element1" class="element">
<div class="namecontainer">
<p class="name" id="name1">element 1</p>
</div>
</div>
<div id="element2" class="element">
<div class="namecontainer">
<p class="name" id="name2">element 2</p>
</div>
</div>
<div id="element3" class="element">
<div class="namecontainer">
<p class="name" id="name3">a third one ?</p>
</div>
</div>
</div>

Answer 2

To hide a CSS element, you can use
display: none;