[Résolu] Maitriser la position des éléments dans une flexbox

J'ai 12 éléments dans une flex-box.
1- Je voudrais n'en voir que 6 dans la zone jaune, et le reste en overflow en scrollant.
2- la distance entre les éléments doit permettre de ne voir que 6 éléments. Je n'y arrive pas avec margin-bottom.
3- la distance horizontale ent les élement devrait être la même
4 les élements doivent être centrés horizontalement

Je ne comprends vraiment pas ce qui cloche.

     <div id="visuContainer">
   <div id="visuElements">
      <div id="element1" class="element">
          <p id="nomElement1" class="nomElement">Elément 1</p>      
      </div>  
      <div id="element2" class="element">
         <p id="nomElement2" class="nomElement">Elément 2</p>      
      </div> 
      <div id="element3" class="element">
         <p id="nomElement3" class="nomElement">Elément 3</p>           
     </div> 
     <div id="element4" class="element">
        <p id="nomElement4" class="nomElement">Elément 4</p>       
    </div> 
    <div id="element5" class="element">
        <p id="nomElement5" class="nomElement">Elément 5</p>     
    </div> 
    <div id="element6" class="element">
       <p id="nomElement6" class="nomElement">Elément 6</p>       
    </div> 
   <div id="element7" class="element">
       <p id="nomElement7" class="nomElement">Elément 7</p>       
   </div> 
   <div id="element8" class="element">
      <p id="nomElement8" class="nomElement">Elément 8</p>     
   </div> 
   <div id="element9" class="element">
     <p id="nomElement9" class="nomElement">Elément 9</p>    
   </div> 
   <div id="element10" class="element">
     <p id="nomElement10" class="nomElement">Elément 10</p>
    </div>       
    <div id="element11" class="element">
      <p id="nomElement11" class="nomElement">Elément 11</p>     
     </div> 
    <div id="element12" class="element">
      <p id="nomElement12" class="nomElement">Elément 12</p>     
     </div> 
  </div> 
</div> 

      #visuContainer {
                 position:fixed;
                 width:87%;
                 top:17%;
                 height:50%;
                 display:flex;
                justify-content:center;
               background-color:yellow;
                align-items:flex-start;
                left:5%;       
     }
 #visuElements {
                position:fixed;
                 top:20%;
                 height:50%;
                 display:flex;
                 justify-content:flex-start;
                align-items:flex-start;
                 flex-direction:row;
                 flex-wrap:wrap;
                 overflow:auto;
                 width:87%;
                 //left:00px;
             }
            
 
            .element {
                  display:flex;
                 flex-direction:column;
                  justify-content:center;
                 align-items:center;
                 background-color:white;  
                 border:2px solid black; border-radius:8px;
                  width:26%;
                  height:40%; 
                  margin-top:25px,
                  margin-bottom:20px;
                  margin-left:25px;
                
             } 
      .nomElement {
                  font-family:"Arial";
                  padding:5px;  
                  padding-left:10px;
                  padding-right:10px;
                  color:black;			     
	        line-height:110%;
                  text-align:center;                 
             }

jsfiddle https://jsfiddle.net/fredericmarcel/6f05oouj/1/

Merci de votre aide.
Frédéric