Scaling iframe content inside flexbox model

Question

I try to scale the content of an iframe as it is done in this fiddle or explained in this SO - How can I scale the content of an iframe?

The difference is, that I would like to use the flexbox model (jsfiddle).

HTML:

<div class="container">
  <div class="top">I <br> am <br> of <br> flexible <br> height</div>    
  <div class="wrap">
    <iframe class="frame" src="http://time.is"></iframe>
  </div>
</div>

CSS:

.container {
  display:flex;
  flex-direction: column;

  height:300px;
  width: 300px;
}

.top {
  display:flex;
}

.wrap {
  display:flex;
  flex:1;

  height:100%;
}

.frame {
  width: 400%;
  height: 400%;
  border: 0;
  -ms-transform: scale(0.25);
  -moz-transform: scale(0.25);
  -o-transform: scale(0.25);
  -webkit-transform: scale(0.25);
  transform: scale(0.25);

  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

I tried it in chrome and firefox.

None of them take 100% width for the iframe.

Firefox calculates the correct height.

In chrome, setting the .wrap {height: 100%} lets the iframe take the width of the .container.

How do I get the iframe to take the dimensions of the .wrap?

score 2 · Accepted Answer · edited Aug 16 '15 at 12:27

Please check this JSFiddle. Seems like it works.

I changed classes for .wrap and for .iframe:

.container {
    display: flex;
    flex-direction: column;
    border: 3px solid red;
    height: 300px;
    width: 300px;
}

.top {
    display: flex;
    border: 3px solid green;
}

.wrap {
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    border: 5px solid blue;
    height: 100%;

}

.frame {
    width: 400%;
    height: 768px;
    border: 0;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

<div class="container">
    <div class="top">I <br> am <br> of <br> flexible <br> height</div>
    <div class="wrap">
        <iframe class="frame" src="http://time.is"></iframe>
    </div>
</div>

Thank you for the reply. The problem here is, that the `.top`-element is not of flexible height anymore. Adding more text breaks the construct. But the width is fixed:) — Stefan, Aug 16 '15 at 12:30
Adding `.wrap {overflow:hidden}` and `.frame {height: xxx%}` actually is a good solution. Thank you mankutila:) — Stefan, Aug 16 '15 at 12:34

Scaling iframe content inside flexbox model

1 Answers1