Nested flexboxes: IE11 doesn't respect max-width: 100%

问题

I'm working on a two column layout. Both columns will display an iframe, the width of both will be defined as inline-style / be set in the CMS. If the iframe is smaller than the column, it should center vertically. If its bigger than the column, it should shrink to the max width of the column, which is nearly 50% wide.

(Yes, this could probably be done without using flexbox twice. But I'm not interested in such answers, because I simplified the example and the 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 as expected in Chrome 39. In Firefox 33 and in IE 10 this works, too. (I'm lazy, so I didn't add the IE10-flexbox syntax in the fiddle.) 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 FF 33.x Flexbox behavior in FF 34.x? for further explanation.

Unfortunately, this fix does not affect IE11. So how do I prevent IE11 displaying the iframe larger than the column? And why is this happening; is this a bug or is this another flexbox-feature that was reintroduced as mentioned in the linked question?

回答1:

Ok, I found a way to prevent this in IE11: max-width: calc( 100% - 0.1px );. Therefore the max-width gets calculated and interpreted in pixel and not in percent, but is nearly 100%. So visually everything looks as expected.

Does anyone know a better solution or an explanation for this problem?

来源：https://stackoverflow.com/questions/27277646/nested-flexboxes-ie11-doesnt-respect-max-width-100

标签

css3

internet-explorer-11

flexbox