CODEWITHSUNDEEP
htmlcssflexboxinternet-explorer-10
user4851524
user4851524

Reputation:

Flex-shrink in IE10

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?

Upvotes: 2

Views: 3097

Answers (2)

Reggie Pinkham
Reggie Pinkham

Reputation: 12708

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

For example,

-ms-flex-negative: 0;

Upvotes: 3

Michael Benjamin
Michael Benjamin

Reputation: 371113

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

Upvotes: 0

Related Questions