Estou tentando criar uma área de conteúdo com um tamanho específico, mas não quero que nada seja exibido se o resultado retornado da API foresvaziar.

Este é o código para o html:

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

Estou chamando uma API que às vezes pode retornar um resultado nulo. Javascript está fora da mesa. Eu tentei usar uma restrição de 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;
 }
}

O comportamento do css é: o iframe fica oculto o tempo todo, embora eu tenha conteúdo nele. Além disso, se o iframe for assim:

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

O css não verá o iframe como vazio.