Estoy intentando crear un área de contenido con un tamaño específico, pero no quiero que se muestre nada si el resultado devuelto de la API esvacío.

Este es el código para el html:

<div class="myclass">
        <iframe frameborder="0" src="http://localhost:1000/example"></iframe>
</div>

Estoy llamando a una API que a veces puede devolver un resultado nulo. Javascript está fuera de la mesa. Intenté usar una restricción css como esta:

.myclass {
max-width: 1060px; 
max-height: 392px;

  & > iframe {
      min-height: 0;
      min-width: 0;
      max-width: 1060px;
      max-height: 392px;
    }

   & > iframe:empty {
    display: none;
 }
}

El comportamiento para el CSS es: el iframe está oculto todo el tiempo, aunque tengo contenido dentro. También si el iframe es así:

<div class="myclass">
        <iframe frameborder="0" src="http://localhost:1000/example">
        <!--notice white-space here-->
        </iframe>
</div>

El CSS no verá el iframe como vacío.