Estoy intentando colocar dos elementos, que están dentro de un contenedor que tiene la propiedad `display: flex`; pero no lo consigo, y no sé si puede.

He estado probando con la propiedad `opacity` y con `z-index`. Pero nada de nada.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .flex-container {             
      display: flex;      
      justify-content: center;             
      align-items: center;
    }         

    #div1 {             
      width: 500px;             
      height: 500px;             
      background-color: red;         
    }   

    #div2 {             
      width: 250px;            
      height: 250px;             
      background-color: gold;             
      border: 1px solid #333;             
      border-radius: 20px;         
    }     

<!-- language: lang-html -->

    <body class="flex-container">     
      <div id="div1"></div>     
      <div id="div2"></div> 
    </body> 


<!-- end snippet -->