Comment définir la hauteur d'une iframe de sorte que tout son contenu soit défini sur 100 % sur une div de hauteur 40 %

J'essaie de définir la hauteur d'un iframe qui rend le tableau de bord powerbi.

Mes exigences sont les suivantes:

Tout le contenu de l'iframe doit être défini sur une hauteur de 100 % et doit être rendu à l'intérieur d'un div de hauteur 40 %

Voici une capture d'écran de ce que j'essaie de réaliser.

entrez la description de l'image ici

J'ai essayé de définir la hauteur de toutes les balises parent, mais cela ne fonctionne tout simplement pas.

S'il vous plaît aider.

.row2{
 height: 40%;
.tabContainer{
 height: 100%;
 background-color: #fff;
.powerBiBlock{
 height: 100%;
.dashboardContainer{
 height: 100%;
.iframe{
 height: 50%;
 //overflow-y: hidden;
 }
 }
 }
 }
 }

<div class="row2" id="ButtonEl">
 <div class="tabContainer">
 <div class="margin50">
 <div class="top-tab btn btn-primary" (click)="toggle()">
 <p><i class="arrow down"></i></p>
 </div>
 </div>
 <div class="powerBiBlock">
 <div id="dashboardContainer" class="dashboardContainer">
 <div id="dashboardContainer" class="dashboardContainer"></div>
 </div> 
 </div>
 </div>
 </div>

Solution du problème

.row2{
 height: 40%;}
 
.tabContainer{
 height: 100%;
 background-color: #fff;
}
.powerBiBlock{
 height: 100%;
 }
.dashboardContainer{
 height: 100%;
 } 
iframe{
 height: 40%!important;
 //overflow-y: hidden;
 }