I am working on arranging two columns. Both columns will display an iframe, the width of both will be determined as inline-style / be set in the CMS. If the iframe is smaller than the column, it should be vertical. If it is larger than the column, it should be reduced to the maximum width of the column, which is almost 50% wide.
(Yes, this could probably have been done without using flexbox twice. But I am not interested in such answers because I simplified the example and use case.)
Example : http://jsbin.com/logifu/2/
HTML:
<div class="content"> <div class="col"> <div class="media-wrapper"> <iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width: 2000px; height: 2000px"></iframe> </div> </div> <div class="col"> <div class="media-wrapper"> <iframe src="http://www.jsbin.com/blog" frameborder="0" scrolling="no" style="width:200px"></iframe> </div> </div> </div>
SCSS:
.content { display: flex; justify-content: center; flex-flow: row wrap; } .col { display: flex; justify-content: center; align-items: flex-start; flex: 1; height: 100%; min-width: 0; // this fixes the issue in FF 34 + .col { margin-left: 40px; } } .media-wrapper { box-sizing: border-box; max-width: 100%; padding: 15px; background: lightblue; } iframe { display: block; margin: 0 auto; max-width: 100%; overflow: hidden; }
This works like in Chrome 39. In Firefox 33 and in IE 10 it works too. (I'm lazy, so I did not add IE10-flexbox syntax to the script.) In the new FF34, it behaved the same as in IE11, but this could be fixed with max-width: 100% . See How can I get the behavior of FF 33.x flexbox in FF 34.x? for further explanation.
Unfortunately, this hotfix does not affect IE11. So, how do I prevent IE11 from displaying the iframe more than the column? And why is this happening; is this a bug or is it another flexbox -feature that has been re-entered as indicated in the related question?
flexbox css3 internet-explorer-11
chaenu
source share