2

I have a block, in which there are an image and another block.

The parent block has display:flex, to make the image and the child block stand in a row.

The child block also has display:flex, but it forms a column made of paragraphs and heading.

http://codepen.io/anon/pen/qNmYRq

.summary__testimonial{
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 120px;
    padding-top: 35px;
    max-width: 100%;
}

.summary__testimonial-right{
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction:column;
    flex-direction:column;
    box-sizing: border-box;
    max-width: 100%;
    -ms-flex-negative:1;
    flex-shrink:1;
    -ms-flex-pack:center;
    justify-content:center;
    width: auto;
}

The problem is that the text paragraph overflows his parents in IE 10.

I tried setting max-width:100%, width:auto, box-sizing:border-box, changing flex-shrink values to 1 and 0.

It still either overflows, or becomes a single line, what you most probably see in the codepen, if you open it in IE 10.

Is there any way to make it look in IE 10 the same as in normal browsers?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701

2 Answers2

3

The IE10 equivalent of flex-shrink is -ms-flex-negative

For example,

-ms-flex-negative: 0;
Reggie Pinkham
  • 11,985
  • 4
  • 38
  • 36
0

Internet Explorer 10 is built using an older version of flexbox (2012).

This version doesn't provide flex-shrink. The property didn't exist at the time.

See the Flexbox IE10 Property Index.

The closest you can get would be the -ms-flex property, which sets "negative flexibility" (reference).

Also see this answer: https://stackoverflow.com/a/35137869/3597276

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • What is then this "-ms-flex-negative:1"? It was set by autoprefixer, is it useless? –  Jul 01 '16 at 13:51
  • I've never heard of it. More importantly, it's not in the MS Flexbox / IE10 guide: https://msdn.microsoft.com/library/hh673531(v=vs.85).aspx – Michael Benjamin Jul 01 '16 at 13:52
  • Ok, but how to understand this: "If you have to support IE 10, the best solution is to always set an explicit flex-shrink value on all of your flex items, or to always use the longhand form". What do they mean, saying "explicit flex-shrink value", when IE10 doesn't have any flex-shrink value?https://github.com/philipwalton/flexbugs –  Jul 01 '16 at 14:01
  • User the `flex` / `-ms-flex` shorthand. It's in my answer, with a link reference. – Michael Benjamin Jul 01 '16 at 14:03
  • Well, I tried to set -ms-flex: 0 0 auto for image and -ms-flex 0 1 auto for column, meaning that image shouldn't shrink, and column should. Nothing changed. –  Jul 01 '16 at 14:43
  • 1
    Well, I found out that if you set flex-shrink:1 (with this "-ms-flex-negative" prefix to make it work in ie10) and then set width:100% to .summary__testimonial-right, it seems to be working as expected. –  Jul 10 '16 at 08:18
  • For answers on this site that you find useful, [consider an upvote and/or checkmark](http://stackoverflow.com/help/someone-answers). There's no obligation. Just one way to promote quality content. – Michael Benjamin Dec 23 '16 at 18:24