How to see a bug in IE 11 with vertical-align and min-height in flex layout?

S

sorry_i_noob2019-10-12 23:00:20

Flexbox

sorry_i_noob, 2019-10-12 23:00:20

On caniuse ( https://caniuse.com/#feat=flexbox) this bug is described:

IE 11 does not vertically align items correctly when min-height is used see bug

There is a link to the microsoft site page, but when I go to it, it redirects me to another page.
I want to see this bug. I made a simple page with the following code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Flex</title>
</head>
<style>
  .flex {
    display: flex;
    min-height: 20px;
    background-color: yellow;
  }
  .child-1 {background-color: red;}
  .child-1:after {
    content: 'Привет';
    display: inline;
    vertical-align:super;
  }
  .child-2 {background-color: orange;}
</style>
<body>

<div class="flex">
  <div class="child child-1">You can control how excess space along a parent box's layout axis is proportionately distributed to child elements. </div>
  <div class="child child-2">By using the -ms-flex property, you can make flexbox items "flex," altering their width or height to fill the available space. A flexbox distributes free space to its items proportional to their positive flexibility, or shrinks them to prevent overflow proportional to their negative flexibility.</div>
</div>

</body>
</html>

And I don't see a bug in IE11 - vertical-align works the same as in chrome. How to see the bug? I want to understand it so that I can take it into account and type it correctly when making layout.