IE bug with flexbox

Question

I have two containers with a width of 50% displayed in a row. In the left container, there is an image. In the right container, there is a title, a text-box with some text and a button displayed in a column. The text-box has a fix width and text with many lines will be hidden. In chrome, mozilla and edge it seems to be fine, but in IE the box does not grow with de content. I think something must be wrong with flexbox. Any ideas? Here is the fiddle: https://jsfiddle.net/oago4ynb/2/

Also a snippet right here:

.wrapper {
  display: flex;
  padding: 0px 20px 0px;
  border: 1px solid red;
}

.image-container {
  width: 50%;
  position: relative;
  overflow: hidden;
  padding: 0;
}

img {
  height: 100%;
  width: auto;
  min-width: 100%;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.content {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 9px 30px 30px;
}

.text {
  flex: 1;
}

p {
  overflow: hidden;
  height: 100px;
}

<div class="wrapper">
  <div class="image-container">
    <img src="https://dummyimage.com/hd1080" alt="Image">
  </div>
  <div class="content">
    <div class="title">
      <h3>Title</h3>
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet
        consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing
        elit. Molestiae magni repellat optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere veroLorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat
        optio dignissimos nihil numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae magni repellat optio dignissimos nihil
        numquam eius corporis dolor molestias, ex fuga sunt enim ratione voluptate delectus dolore aspernatur facere vero!!</p>
    </div>
    <div class="button">
      <button>Click me!</button>
    </div>
  </div>
</div>

what version of IE are you using? because `display:flex` is only supported in IE11.[Here is the list of browser supports.](https://caniuse.com/#feat=flexbox). — Shadow Fiend, Oct 25 '17 at 07:13
@ShadowFiend Yes I know, I'm using IE 11.0.14393.0 - so that's why it confuses me... — webta.st.ic, Oct 25 '17 at 07:14
ie11 doesn't play very nice with flex direction column (especially when nested). You might be able to fix it by completing your flex-rule with all shorthand params: `.text { flex: 1 0 auto; }` and `-ms-flex-pack` might help. — admcfajn, Oct 25 '17 at 07:25
I FIXED IT: On the image box, flex: 1 is wrong, you have to use flex: 1 0 auto; to solve it for all browsers: https://jsfiddle.net/oago4ynb/3/ — webta.st.ic, Oct 25 '17 at 07:26
Ha! Nice timing @MrBuggy good stuff, glad you got it sorted out :) — admcfajn, Oct 25 '17 at 07:27
As an aside, I would suggest `background-size:cover` for the image on the left, rather than the mess currently in place with `position:absolute; left: 50%; transform: translateX(-50%)` etc. See https://jsfiddle.net/ka3tuv78/7/ (and it works in IE11) — Jeremy Thille, Oct 25 '17 at 07:35

score 0 · Answer 1 · answered Oct 25 '17 at 07:59

SOLUTION:

The problem was the flex: 1; on the .text class. Internet Explorer has problem with flex and just one value. Other browser understand it, but if you use flex property on IE, you have to write all three values out so the solution will be flex: 1 0 auto; for my issue. You can use also just one value, but then you have to use the specific property, which would be for this case flex-grow: 1;. Both solution will work. FYI: There is also a knewn issue with this example: flex: 1 1 0; or flex: 1 0 0;. All browsers will understand the third value for flex-basis which is in this two cases 0. In IE you have to write 0px, otherways you'll have problems. Here is the fiddle with both solutions: https://jsfiddle.net/oago4ynb/5/

Thanks!

IE bug with flexbox

1 Answers1