title: Forcing Iframe into a collapse bootstrap component to fit screen
body: <p>I am using an Accordion Collapse bootstrap component to display two collapse items in a page. The first collapse item is collapsed by default and the second one has in it body an iframe which display a pdf document. I need the second collapsible item to fit the left height of the screen. I tried to achieve it with flex boxes but seems there is an issue with the collapse event and the flex box. I would appreciate any help.</p>
  
  <p>This is my fiddle example:</p>
  
  <p><a href="https://jsfiddle.net/651vfxk8/" rel="nofollow noreferrer">Example</a></p>
  
  <p>The following picture depicts the undesired behaviour:<br>
  <a href="https://i.stack.imgur.com/BQL0Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BQL0Y.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;vp-leftpanel&gt;
     &lt;div class="panel-group" id="accordion" role="tablist" aria-
        multiselectable="true"&gt;
        &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading" role="tab" id="headingOne"&gt;
          &lt;h4 class="panel-title"&gt;
              &lt;a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
                  {{panelHeadingData}}
              &lt;/a&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
      &lt;div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div *ngIf="candidate.hasEmailSourceData"&gt;
  
                  .....
  
              &lt;/div&gt;                
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading" role="tab" id="headingTwo"&gt;
          &lt;div class="panel-title"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;
                          {{panelHeadingResume}}
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;select class="form-control" (change)='loadDocument($event.target.value)'&gt;
                          &lt;option [value]="d.id" *ngFor="let d of candidate.candidateDocuments"&gt;{{d.friendlyName}}&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"&gt;
          &lt;div class="panel-body"&gt;
              &lt;div *ngIf="candidate.candidateDocuments.length &gt; 0" class="apply-flex"&gt;
                  &lt;iframe [src]="documentSelectedPathSafe" type="application/pdf" &gt;&lt;/iframe&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
    &lt;/div&gt;
    &lt;/vp-leftpanel&gt;
  </code></pre>