Div mit Überlauf:

Question

Ich möchte 2 Elemente in einem div aber nur eins sollte sichtbar sein, und ich möchte eine vertikale Bildlaufleiste haben. Leider ist das zweite Element sichtbar und es gibt keine Bildlaufleiste.

#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

ein CSS-Element auszublenden, können Sie

verwenden

display: none; 

Answer 2

Sie müssen sich mit Spielraum spielen und absolute positionnong fallen denn es Element zieht die Strömung und ist nicht erforderlich, hier 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>