Div with Overflow :

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;