HTML CSS flexbox max-width and IE

<!DOCTYPE html>
<html>
<head>
<style>

.d1 {
    background: blue;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 500px;
}

</style>
</head>
<body>

<div class="d1">
    A Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test B
</div>

</body>
</html>

I use a flexbox like the above with max-width. This code works fine for google chrome and gives the result:

enter image description here

But it bugs in internet explorer erasing the start and displaying it in a single line:

enter image description here

I don’t know what’s wrong with max-width and how can I fix this… Some help pls!

HTML CSS flexbox max-width and IE